首页 > 其他分享> 文章详细

html和css之背景样式详解

2021-01-14 23:34:25 阅读：173 来源： 互联网

标签：平铺 repeat html 背景图片 background css div 详解 size

背景样式详解

opacity和display的区别
1. opacity设置的是透明度，值的范围是0~1，0代表完全透明，1代表不透明
2. display为none，浏览器就不会渲染这个元素。
  
  一个元素设置为display为none后想让他在显示出来使用，display:原来的显示类型；
背景颜色的显示区域

内容区+padding+border
背景图片
background-image: url(‘图片地址’) ;
```
div{
    background-image: url('./images/pic.jpg');
}
```
背景图片的显示区域内容区域+padding+border

背景图片支持的格式：.jpg，.png，.gif，.webp
浏览器的渲染层级

第一层：内容层

第二层：边框层

第三层：背景图片

第四层：背景颜色
背景图片为什么会重复显示：

浏览器发现图片比盒子小就会让图片平铺把盒子占满
如何让背景图片不重复显示：
使用background-repeat属性，它有三个值
```
div{
    background-repeat:
    	no-repeat /*垂直方向和水平方向都会重复*/
        repeat-x /*水平方向平铺*/
        repeat-y /*垂直方向平铺*/
        repeat /*垂直方向和水平方向都会重复*/
        ;
}
```
background-repeat:

repeat -> 垂直方向和水平方向都会重复

repeat-x -> 水平方向平铺

repeat-y -> 垂直方向平铺

no-repeat -> 水平垂直方向都不平铺

；
设置完背景图片不平铺之后发现图片不会出现在border内，为什么？

背景图片在设置平铺的时候会先在内容区显示一张图片，然后再去平铺。

如何把背景图片拉大？

使用background-size的属性，它有两个值：

background-size：width背景图片的宽 height背景图片的高；

宽高可以设置为像素值，也可以设置为百分比：

div{
    width:500px;
    height:500px;
    background-size: 350px 350px;/*支持*/
    background-size:50% 50%;/*同样支持,但百分数的基数是width和height属性，也就是说现在图片的宽度是1*500=500px 高度是1*500=500px*/
    background-size:350px;/*只写一个值的时候宽缩放至350px，高等比例缩放*/
}

/*除此之外background还有两个比较特殊的值，cover，contain*/
div{
    width:500px;
    height:500px;
    background-size: 
        cover/*图片一直缩放到铺满整个内容区域*/
        contain/*一条边缩放到铺满内容区域后另一条边停下来*/
        ;
}

默认情况下背景图片是贴着padding的左上角去排列的，怎么改变它的起始点？

使用background-origin属性

div{
    background-origin:
        padding-box/*背景图片相对于内边距来定位*/
        border-box/*背景图片相对于内边距来定位*/
        content-box/*背景图片相对于内容区域来定位*/
        ;
}

背景剪裁

使用background-clip属性,会裁剪背景图片和背景颜色

div{
    background-clip:
        content-box/*只显示内容区部分的图片和颜色*/
        border-box/*显示border+padding+内容区的背景图片和背景颜色*/
        padding-box/*显示padding+内容区的背景图片和背景颜色*/
        ;
}

overflow属性：

div{
    overflow:
        visible/*超出之后正常显示*/
        hidden/*超出隐藏*/
        scroll/*内容不管超不超出都显示出一个滚动条*/
        auto/*内容不超出的时候不显示滚动条，内容超出则显示滚动条*/
        ;
}

什如何让背景图片不跟随内容区域滚动

使用backgroun-attachment属性

div{
    background-attachment:
        scroll/*默认，不随内容区域滚动，而是定在起始的位置*/
        local/*会随内容的滚动而滚动*/
        fixed/*非常诡异的一种情况*/
        ;
}

背景图片复合样式写法:

div{
    background: color image repeat attachment position/size;/*位置和大小之间要使用/分隔开*/
}

标签：平铺,repeat,html,背景图片,background,css,div,详解,size
来源： https://blog.csdn.net/Deng872347348/article/details/112644972

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

html和css之背景样式详解

背景样式详解