HTML中的背景设置（上）

最新推荐文章于 2024-05-16 16:22:03 发布

可乐喽

最新推荐文章于 2024-05-16 16:22:03 发布

阅读量3.4k

点赞数 4

分类专栏：前端文章标签： html 前端

本文链接：https://blog.csdn.net/m0_52660785/article/details/125984297

版权

前端专栏收录该内容

10 篇文章 1 订阅

订阅专栏

背景的基本属性

背景颜色：background-color

背景图片：background-image

背景铺盖：background-repeat

背景大小：background-size

背景固定：background-attachment

背景定位：background-position

示例

总结

背景的基本属性

背景颜色：background-color

通过“background-color”属性设置元素的背景颜色，属性值可以为对应颜色的用英文名称或rgb值或十六进制值。

 英文名称：background-color: red;
 rgb值：background-color: rgb(0, 255, 128);
 十六进制值：background-color: #bcbc12;

背景图片：background-image

我们不仅可以给元素设置背景颜色，还可以通过设置“background-image”属性来给它设置背景图片。图片的路径可以为本机地址，也可以为一个网络链接。然后，设置元素的宽高与图片的宽高相对应，就可以将图片完美的显示出来了。

 div {
     width: 300px;
     height: 300px;
     background-image: url(图片路径);
 }

背景铺盖：background-repeat

背景铺盖主要跟图片背景一起用，因为纯色背景就没什么铺盖的必要了。

属性值	作用
repeat	背景图像在垂直方向和水平方向重复，默认。
repeat-x	背景图像在水平方向重复
repeat-y	背景图像在垂直方向重复
no-repeat	背景图像只显示一次
inherit	继承父元素的 background-repeat 属性值

背景大小：background-size

当我们所用的图片太大或者太小的时候，可以通过“background-size”属性来设置背景图片的大小。此时要记得等比例压缩或放大，否则画面不忍直视。

背景固定：background-attachment

通过“background-position”属性可以设置背景对页面滚动的反应。

属性值	作用
scroll	背景图片随着页面的滚动而滚动，默认。
fixed	背景图片不会随着页面的滚动而滚动，此时图像定位时参照的就是页面了，可能不会在元素中显示出来或仅显示一部分。
local	背景图片会随着元素内容的滚动而滚动。
inherit	继承父元素的 background-attachment 属性值

背景定位：background-position

设置的背景图片默认是从元素的左上角开始的，但是我们可以通过设置"background-position"属性来移动图片的位置。注意，此处的定位是相对于元素的，相对于元素左上角的！

属性值	使用方法
left top	通过top、bottom、left、right、center五个英文单词两两组合来设置图像的位置
50px 50px	通过数值来设置图片的位置，数值的单位是像素、百分比等
inherit	继承父元素的 background-position 属性值

示例

 <!DOCTYPE html>
 <html lang="en">
 
 <head>
     <meta charset="UTF-8">
     <title>Document</title>
     <style>
         div:nth-of-type(1) {
             width: 1280px;
             height: 720px;
             background-size: 640px 360px;
             background-image: url(https://img.zcool.cn/community/01936a58be7362a801219c77fe8358.jpg@1280w_1l_2o_100sh.jpg);
             background-position: left bottom;
             background-repeat: no-repeat;
             background-color: yellow;
 
         }
 
         div:nth-of-type(2) {
             width: 2560px;
             height: 1440px;
             background-color: red;
             background-size: 1280px 720px;
             background-image: url(https://img.zcool.cn/community/01936a58be7362a801219c77fe8358.jpg@1280w_1l_2o_100sh.jpg);
             background-repeat: no-repeat;
             background-attachment: fixed;
         }
 
         div:nth-of-type(3) {
             width: 2560px;
             height: 1440px;
             background-size: 1280px 720px;
             background-image: url(https://img.zcool.cn/community/01936a58be7362a801219c77fe8358.jpg@1280w_1l_2o_100sh.jpg);
             background-repeat: repeat;
         }
 
         div:nth-of-type(4) {
             width: 2560px;
             height: 1440px;
             background-color: red;
             background-size: 1280px 720px;
             background-image: url(https://img.zcool.cn/community/01936a58be7362a801219c77fe8358.jpg@1280w_1l_2o_100sh.jpg);
             background-position: 50% 60%;
             background-repeat: no-repeat;
         }
     </style>
 </head>
 
 <body>
     <div>
         背景定位一
     </div>
     <div>
         背景固定
     </div>
     <div>
         背景铺盖及大小设置
     </div>
     <div>
         背景定位二
     </div>
 </body>
 
 </html>