首页 > 代码库 > 跟css背景有关的属性

跟css背景有关的属性

2024-08-20 09:43:15   223人阅读

 

印象中css控制背景的就一个background，但是background是一个复合属性

它包括：

  • background-color：背景颜色，css支持的颜色表示方法，都可以用
  • background-image：背景图片（url）
  • background-repeat：背景是否重复（repeat、no-repeat、repeat-x、repeat-y）
  • background-position：背景定位（关键字、百分比、像素）
  • background-size：背景大小
  • background-origin：背景的定位区域
  • background-clip：背景绘制区域
  • background-attachment：规定背景图像是否固定或者随着页面的其余部分滚动

除了这些，多背景、渐变、遮罩，我也把他们归到背景里吧。

一个个看看吧-0-。

开头说了，我很长时间都以为背景就是background这一个单词的玩意。因为我总是写成：

1 .div{
2     background: #000 url("1.jpg") no-repeat left center;/*颜色、图片、是否平铺、定位*/
3 }

 

背景的定位区域（background-origin）：值是关键字

 1     .div{
 2         width: 400px;
 3         height: 200px;
 4 
 5         padding: 20px;
 6         border:10px solid rgba(255,255,255,.2);
 7 
 8         background: #000 url("1.jpg") no-repeat;
 9         background-origin:border-box;
10         /*background-origin:padding-box;*/
11         /*background-origin:content-box;*/
12     }

 

  • border-box技术分享
  • padding-box技术分享
  • content-box技术分享

以上就是background-origin的效果，但是貌似好像跟我想要的有那么点区别，底边跟右侧在padding、content的时候还是有背景图，而且啊好像对背景颜色（#000）没起作用

背景的定位区域（background-origin）：值是关键字

 1 .div{
 2     width: 400px;
 3     height: 200px;
 4 
 5     padding: 20px;
 6     border:10px solid rgba(0,0,0,.1);
 7 
 8     background:#000 url("1.jpg") no-repeat;
 9     /*background-clip:border-box;*/
10     /*background-clip:padding-box;*/
11     background-clip:content-box;
12 }

 

  • border-box：技术分享

     

  • padding-box：技术分享

     

  • content-box：技术分享

     

以上就是background-clip的效果，感觉比background-origin好那么点，哈。

多个背景图

以前在一个容器（div）里，实现多层背景，只能在容器里多写几个子元素，然后在把子元素定位。简单点让设计给出账图，直接糊上去完事（我经常干的事，哈哈）。

技术分享

现在实现上边的效果，只要一个div就可以了。

技术分享 
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .div{
 8             width: 240px;
 9             height: 150px;
10             border:1px solid #000;
11             
12             background: url("1.jpg") no-repeat left top,
13                         url("2.jpg") no-repeat left bottom,
14                         url("3.jpg") no-repeat right bottom;
15             background-size:100px auto, 100px auto, 100px auto;
16         }
17     </style>
18 </head>
19 <body>
20 <div class="div"></div>
21 </body>
22 </html>
多个背景

 

 

 

 

 

说实话，看完这些知识点，真的不想再重新写一遍。感觉忘记在查手册、百度、谷歌一下就好了。

不过心里边总是还有点纠结吧。

在坚持坚持吧！！！还有渐变没有写

 

跟css背景有关的属性


联系
我们