CSS:background 复合属性详解(用法 + 例子 + 效果)

这篇具有很好参考价值的文章主要介绍了CSS:background 复合属性详解(用法 + 例子 + 效果)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

background 复合属性

background-color 背景颜色(纯)

.main{
    width:300px;
    height:300px;
    background-color: blue;
}

CSS:background 复合属性详解(用法 + 例子 + 效果),CSS,css,前端

background-image 背景图片 或者 渐变颜色

background-image:linear-gradient(角度(deg),颜色1,颜色2, …); 线性渐变(渐变方向,颜色1->颜色2->…)
背景颜色之上

.main{
    width:300px;
    height:300px;
    background-color: blue; 
    /*  */
    background-image: url(img/R-C.jfif); 
}

CSS:background 复合属性详解(用法 + 例子 + 效果),CSS,css,前端

background-repeat 背景是否重复

横向repeat-x, 纵向repeat-y;
默认repeat,可设为不重复no-repeat
background-repeat:round; 个体完整,微调大小
background-repeat:space; 调整空隙

.main{
    width:300px;
    height:300px;
    background-color: rgb(160, 236, 255); 
    background-image: url(img/R-C.jfif); 
    /*  */
    background-size:30%;
    background-repeat: space;
}

CSS:background 复合属性详解(用法 + 例子 + 效果),CSS,css,前端

background-size 设置图片大小

background-size:宽度,高度;
单位可以是像素和百分数。
例如上一个例子中,图片太大了,我们将图片设置为30%。

    background-size:30%;

cover 预定义值(覆盖)根据大小自动变化

background-position 设置背景图片显示位置

background-position: 横向偏移量,纵向偏移量;
backgound-position-y; y轴
backgound-position-x; x轴
默认显示左上角0,0;

background-attachment 设置背景图片是否随页面滚动

background-attachment:scroll; 滚动(默认)
background-attachment:fixed; 固定
下面是固定模型的效果:
CSS:background 复合属性详解(用法 + 例子 + 效果),CSS,css,前端文章来源地址https://www.toymoban.com/news/detail-640037.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        body{
            width:100%;
        }
        .zw{
            height: 500px;
        }
        .box{
            width:100%;
            background-image: url(1.jpg);
            background-attachment:fixed; 
            height: 300px;
        }
    </style>
</head>
<body>
    <div class="zw">
        占位置
    </div>
    <div class="zw">
        占位置
    </div>
    <div class="box">
        
    </div>
    <div class="zw">
        占位置
    </div>
    <div class="zw">
        占位置
    </div>
</body>
</html>

到了这里,关于CSS:background 复合属性详解(用法 + 例子 + 效果)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包