html背景

已于 2022-04-26 13:11:24 修改
阅读量115 收藏
点赞数
文章标签： html
于 2022-04-26 13:09:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_66546749/article/details/124425432
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景</title>
    <style>
        div{
            width: 1000px;
            height: 1000px;
            /*默认铺满整个屏幕*/
            background-image: url(../images/girl.png);
 
        /*    不平铺*/
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

背景图片位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 1000px;
            height: 1000px;
            /*默认铺满整个屏幕*/
            background-image: url(../images/logo.png);
 
            background-color: yellowgreen;
        /*    不平铺*/
            background-repeat: no-repeat;
            /*精确单位*/
            /*background-position: 20px 50px;*/
            /*background-position: center top;*/
            /*background-position: left top;*/
            /*background-position: bottom;*/
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

固定背景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 1000px;
            height: 1000px;
            /*默认铺满整个屏幕*/
            background-image: url(../images/girl.png);
 
        /*    不平铺*/
            background-repeat: no-repeat;
 
        /*   背景固定  scroll*/
            background-attachment: fixed;
        }
    </style>
</head>
<body>
    <div>
        <p>墨染千秋，海纳百川，我叫墨川</p>
        <p>墨染千秋，海纳百川，我叫墨川</p>
        <p>墨染千秋，海纳百川，我叫墨川</p>
        <p>墨染千秋，海纳百川，我叫墨川</p>
        <p>墨染千秋，海纳百川，我叫墨川</p>
        <p>墨染千秋，海纳百川，我叫墨川</p>
        <p>墨染千秋，海纳百川，我叫墨川</p>
        <p>墨染千秋，海纳百川，我叫墨川</p>
        <p>墨染千秋，海纳百川，我叫墨川</p>
        <p>墨染千秋，海纳百川，我叫墨川</p>
        <p>墨染千秋，海纳百川，我叫墨川</p>
        <p>墨染千秋，海纳百川，我叫墨川</p>
        <p>墨染千秋，海纳百川，我叫墨川</p>
        <p>墨染千秋，海纳百川，我叫墨川</p>
        <p>墨染千秋，海纳百川，我叫墨川</p>
        <p>墨染千秋，海纳百川，我叫墨川</p>
        <p>墨染千秋，海纳百川，我叫墨川</p>
        <p>墨染千秋，海纳百川，我叫墨川</p>
        <p>墨染千秋，海纳百川，我叫墨川</p>
        <p>墨染千秋，海纳百川，我叫墨川</p>
        <p>墨染千秋，海纳百川，我叫墨川</p>
        <p>墨染千秋，海纳百川，我叫墨川</p>
        <p>墨染千秋，海纳百川，我叫墨川</p>
        <p>墨染千秋，海纳百川，我叫墨川</p>
        <p>墨染千秋，海纳百川，我叫墨川</p>
        <p>墨染千秋，海纳百川，我叫墨川</p>
    </div>
</body>
</html>

背景复合写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            /*背景固定，背景不平铺，背景图片*/
            width: 1000px;
            height: 1000px;
            /*默认铺满整个屏幕*/
            /*background-image: url(../images/girl.png);*/
 
        /*    不平铺*/
        /*    background-repeat: no-repeat;*/
 
        /*   背景固定  scroll*/
        /*    background-attachment: fixed;*/
        /*    background: url(../images/girl.png) no-repeat fixed;*/
            background: no-repeat fixed url(../images/girl.png)  ;
        }
    </style>
</head>
<body>
    <div>
        <p>墨染千秋，海纳百川，我叫墨川</p>
        <p>墨染千秋，海纳百川，我叫墨川</p>
        <p>墨染千秋，海纳百川，我叫墨川</p>
        <p>墨染千秋，海纳百川，我叫墨川</p>
        <p>墨染千秋，海纳百川，我叫墨川</p>
        <p>墨染千秋，海纳百川，我叫墨川</p>
        <p>墨染千秋，海纳百川，我叫墨川</p>
        <p>墨染千秋，海纳百川，我叫墨川</p>
        <p>墨染千秋，海纳百川，我叫墨川</p>
        <p>墨染千秋，海纳百川，我叫墨川</p>
        <p>墨染千秋，海纳百川，我叫墨川</p>
        <p>墨染千秋，海纳百川，我叫墨川</p>
        <p>墨染千秋，海纳百川，我叫墨川</p>
        <p>墨染千秋，海纳百川，我叫墨川</p>
        <p>墨染千秋，海纳百川，我叫墨川</p>
        <p>墨染千秋，海纳百川，我叫墨川</p>
        <p>墨染千秋，海纳百川，我叫墨川</p>
        <p>墨染千秋，海纳百川，我叫墨川</p>
        <p>墨染千秋，海纳百川，我叫墨川</p>
        <p>墨染千秋，海纳百川，我叫墨川</p>
        <p>墨染千秋，海纳百川，我叫墨川</p>
        <p>墨染千秋，海纳百川，我叫墨川</p>
        <p>墨染千秋，海纳百川，我叫墨川</p>
        <p>墨染千秋，海纳百川，我叫墨川</p>
        <p>墨染千秋，海纳百川，我叫墨川</p>
        <p>墨染千秋，海纳百川，我叫墨川</p>
    </div>
</body>
</html>
05_border.html 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: red;
 
            /*复合样式*/
            /*border: 1px solid chartreuse;*/
            border-width: 5px 7px 10px 15px;
            border-style: solid;
            border-color: blue;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>
06_padding.html 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: red;
 
            /*内边距会撑开盒子*/
            /*padding: 10px;*/
 
            padding-bottom: 10px;
            border-bottom: 10px solid skyblue;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
07_margin.html - 代码阅读
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;
 
            /*四个方向的值一样  上右下左 顺时针*/
            /*margin: 100px;*/
            /* 上下  左右*/
            /*margin: 100px auto;*/
            /* 上 左右 下*/
            margin: 100px 200px 400px;
            background-color: brown;
 
            /*display: inline-block;*/
            /*margin-left: 40px;*/
 
        }
 
        .box{
            width: 300px;
            height: 300px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div></div>
    <div class="box"></div>
</body>
</html>
08_外边距塌陷.html - 代码阅读
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: skyblue;
        /*    解决外边距塌陷问题*/
            overflow: hidden;
        }
        .box div{
            width: 500px;
            height: 200px;
            background-color: coral;
            margin: 50px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div></div>
    </div>
</body>
</html>
09_小结.html - 代码阅读
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding:0;
        }
        div{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            background-color: #58b2ff;
        }
    </style>
</head>
<body>
    <div>
        盒子宽=样式宽+内边距+外边距+边框
    </div>
</body>
</html>
10_浮动.html - 代码阅读
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .wrap{
            width: 200px;
            height: 200px;
            background-color: red;
            float: right;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: skyblue;
            float: left;
        }
    </style>
</head>
<body>
    <div class="wrap"></div>
    <div class="box"></div>
</body>
</html>
11_高度塌陷.html - 代码阅读
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="reset.css">
    <style>
        ul{
            border: 1px solid red;
 
            /*position: absolute;*/
        }
        li{
            list-style: none;
            width: 50px;
            height: 50px;
            background-color: slateblue;
            float: left;
 
        /*    文字居中*/
            text-align: center;
            line-height: 50px;
            margin: 2px 5px;
            border-radius: 5px;
        }
 
    </style>
</head>
<body>
<ul class="clearfix">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
</body>
</html>
12_定位.html - 代码阅读
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .wrap{
            width: 200px;
            height: 200px;
            background-color: slateblue;
 
        /*    相对定位*/
        /*    position: relative;*/
 
            /*绝对定位 脱离文档流，原先的位置会填充*/
            position: absolute;
            top: 120px;
            left: 200px;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: gold;
        }
 
    </style>
</head>
<body>
    <div class="wrap"></div>
    <div class="box"></div>
</body>
</html>
13_固定定位.html - 代码阅读
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            height: 2500px;
        }
        div{
            width: 300px;
            height: 300px;
        }
        .box{
            background-color: gold;
            position: fixed;
            right: 50%;
        }
    </style>
</head>
<body>
    <div class="wrap"></div>
    <div class="box"></div>
</body>
</html>
14_定位补充.html - 代码阅读
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li{
            list-style: none;
            width: 50px;
            height: 50px;
            position: absolute;
        }
        .box1{
            background-color: red;
            z-index: 2;
        }
        .box2{
            background-color: skyblue;
            z-index: 1;
        }
        .box3{
            background-color: darkgreen;
            z-index: 1;
        }
        .box4{
            background-color: pink;
            z-index: 1;
        }
 
    </style>
 
</head>
<body>
<!--多行同时编辑 按住alt键 鼠标点击-->
<ul>
  <li class="box1"></li>
  <li class="box2"></li>
  <li class="box3"></li>
  <li class="box4"></li>
</ul>
</body>
</html>
H L239
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端学习 -- Html&Css -- 背景
A08110123的博客
05-16 1418
background 在一个声明中设置所有的背景属性。background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。background-color 设置元素的背景颜色。background-image 设置元素的背景图像。background-position 设置背景图像的开始位置。background-repeat 设置是否及如何重复背景图像...
HTML背景
m0_59359854的博客
05-18 4023
1: background-color设置背景色 2、 设置背景图片 语法：background-image:url(./img) ; _可以同时设置背景色，火绒背景图片，如果同时设置，背景色是在背景图下面 --图片在元素中的位置 如果背景图片大于元素，默认是显示图片的左上角 如果一样大，则正常全部显示 如果图片小于元素，则默认情况下，背景图片会平铺充满元素 background-image:url() ; 3、 background-repeat...
html——背景Background讲解
2301_78753262的博客
12-15 3717
背景颜色背景图片是否平铺背景位置背景滚动还是固定。
html+CSS让背景图片充满整个屏幕
热门推荐
u011846249的专栏
10-19 17万+
由于给网页设置背景图时，需要设置背景图不重复且充满整个浏览器屏幕。      给body标签指定背景图，这样背景图就可以填充整个浏览器viewport了。 其实，该方案对所有的块级容器都可以生效。块级容器的宽高是动态的，那么背景图将自动伸缩，充满整个容器。 可设置body标签的CSS样式如下： body{ /*加载背景图*/ backg
HTML中的背景
weixin_52484792的博客
04-13 1745
了解HTML中的背景，掌握其用法
html 背景 设置
qq_44787874的博客
11-12 210
背景标签：background 背景颜色：bgcolor <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>beijingshezhi</title> </head> <body bgcolor="aqua"> </body> </html> <!DOCTYPE html> <html
html背景轮播js代码
12-14
HTML 背景轮播 JS 代码 HTML 背景轮播 JS 代码是一段可以插入 HTML 页面的 JavaScript 代码，用于实现背景图片轮播效果。这段代码可以直接嵌入 HTML 代码的最后面，以实现页面背景图片的轮播功能。 知识点 1: ...
HTML背景水印效果
04-20
支持图片水印，文字水印，文字水印支持倾斜效果。兼容IE8+
HTML背景音乐
03-28
HTML添加背景音乐两种方式实现,这种背景音乐是打开叶子后直接播放的，在网页上不会有显示。这是最简单的一种.
【html背景图片铺满网页】html 怎么让背景图铺满整个页面
04-11
总结一下，让HTML背景图片铺满整个网页，主要涉及CSS的`background-size`、`background-position`、`background-repeat`以及可能的媒体查询等属性的使用。结合合理的图片优化策略，你可以创建出视觉效果出色的全屏...
html背景 蜘蛛网背景js算法文件
01-29
ixingxing.js
HTML背景样式简单介绍
Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
11-28 1万+
HTML背景样式
HTML如何设置背景图片？有几种设置背景图片的办法？
爱编程的鱼的博客
01-14 2万+
我们在编辑网页时，如果觉得网页过于单调，这时便可以加上一张自己喜欢的背景图。这篇文章中，W3Cschool 小编给大家介绍下 HTML 中如何设置背景图片，分别有哪几种设置背景图片的方法。
html中关于背景的设置
weixin_53892095的博客
07-16 1487
①将多个图片整合为一张图片，浏览器只需要发送一次请求，就可以同时加载多个图片，提高访问效率，提高用户体验。②将多个图片整合为一张图片，减少图片的总大小，提高请求的速度，增加了用户体验。取值：英文、rgba、rgb、#000000、hsl(a)精灵图又称雪碧图，是将小图标集中于一张图片上。
HTML中的背景设置（上）
m0_52660785的博客
07-25 3481
HTML中的背景设置（上）
HTML/CSS设置网页背景
夏日漱石的博客
03-12 2万+
HTML/CSS设置网页背景
HTML + CSS 连载 | 25 - CSS 设置背景
JingnanJia的博客
10-28 151
用于设置背景图片在水平、垂直方向上的具体位置，可以设置具体的值，如 20px 30px，水平和垂直方向上还可以设置 left\top、center、right\bottom 等值，如果只设置了一个方向，另一个方向默认是 center。当滚动文字的时候，图片并没有随着文字一起滚动，通过设置 background-attchment 为 local 就可以让背景图片随着文字一起滚动；刷新页面，并滚动视图的滚动条，可以看到背景图片是不动的；给 HTML 页面增加内容，使视口出现滚动条，并设置。
HTML--CSS--图片和背景样式
最新发布
weixin_44517278的博客
01-15 1522
最基本的应该就是对大小的管理width:像素值;宽度height:像素值;高度</imgwidth;height;</</</</
html设置背景图
qq_63311302的博客
05-18 1万+
html设置背景图其实很简单，我们一起来看看吧！相信看完你也就会了。 body标签的background属性 我们先来看看源代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body background="C:/dopt/1.jpg"> </body> &...
html背景图片全屏
09-12
要将 HTML 背景图片设置为全屏，你可以使用 CSS 的 `background-size` 属性和 `background-image` 属性组合来实现。以下是一种常见的方式： 1. 首先，在你的 HTML 文件中，创建一个 div 元素，作为整个页面的容器。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值