您的位置：首页 > Web前端 > CSS

WEB前端学习:CSS学习_CSS背景图片相关属性

2020-03-28 18:50 627 查看

背景

文章目录

  • 持续更新...

    • 该篇为讲得是背景图片。使用恰当可以给自己的网页锦上添花

    一、主要属性

    1. background-color

    将颜色当作背景

    background-color: transparent;
/* 默认值，透明色 */

background-color: red;
/* 颜色关键字 */

background-color: #ff0000;
/* 颜色十六进制 */

background-color: rgba(255,0,0,1.0);
/* r:red(红色)，g:green(绿色)，b:blue(蓝色)，a:alpha(透明度) */

    可以利用 background-color 制作半透明背景

    2. background-image

    将图片单作背景

    background-image: none;
/* 默认值，没有背景图片 */

background-image: url(images/img.png);
/* url 中定义背景图片路径。可以是本地路径，也可以是完整的网络路径 */

background-image: linear-gradient(45deg,blue,red);
/* 将线性渐变定义为背景图像。第一个值为角度，第二个值为顶部开始颜色，第三个值为底部结束颜色 */

background-iamge: radial-gradient(circle,blue,red);
/* 将径向渐变定义为背景图像。第一个值为形状，第二个值为中心颜色，第三个值为边缘颜色 */

    3. background-repeat

    背景图片如何重复

    background-repeat: repeat;
/* 默认值，水平方向和垂直方向同时重复 */

background-repeat: no-repeat;
/* 不重复 */

background-repeat: repeat-x;
/* 水平方向进行重复 */

breakground-repeat: repeat-y;
/* 垂直方向进行重复 */

    4. background-position

    背景图片的位置
    tips：左上角点为原点，垂直坐标（Y轴）的正方向为垂直向下

    background-position: 10% 10%;
/* 背景图片位在10％上的水平轴和10％在垂直轴上。 */

background-position: 100px 100px;
/* 背景图片位在100px上的水平轴（x轴）和100px在垂直轴（y轴）上。 */

background-position: right top;
/* 使用关键字代表背景图片位置，只有一个值时，另一个默认为 center */

background-position: center center;
/* 背景图片位于元素的中心 */

    5. background-size

    背景图片的大小

    background-size: auto auto;
/* 默认值，图片的原始尺寸 */

background-size: cover;
/* 等比例缩放背景图片以完全覆盖背景区,多余部分隐藏 */

background-size: contain;
/* 将图片完整的显示在背景区 */

background-size: 180px 180px;
/* 第一个值为宽，第二个属性为高 */

background-size: 80% 80%;
/* 第一个值为宽，第二个属性为高。以背景图片的原始尺寸作为标准，进行百分比变化 */

    6. background-attachment

    定义滚动页面时背景图像的行为

    background-attachment: scroll;
/* 默认取值，背景图像将随页面滚动 */

background-attachment: fexid;
/* 背景图像将不会随页面滚动，而是保持根据视口的位置。如果背景图片比显示的区域大，那么滑动滚动条，背景图会一直在变化 */

    7. background-clip

    背景在元素内应延伸的距离

    background-clip: border-box;
/* 背景图片区域包括边框区域 */

background-clip: padding-box;
/* 背景图片区域包括填充，但不包括边框 */

background-clip: centent-boxl;
/* 背景图片区域在内容区域内，不包括填充和不包括边框 */

    8. background（简写属性）

    推荐赋值顺序

    1. background-clip
    2. background-color
    3. background-image
    4. background-repeat
    5. background-attachment
    6. background-position
    7. background-size

    tips：< background-size > 只能紧接着 < background-position > 出现，以"/"分割，如： “center/cover”

    9.多背景设置

    在 CSS3 中支持多背景设置

    注意点：

    • 每一组都需要用一个逗号隔开
    • 前面一层的背景可以覆盖后面背景
    • 背景色最好最好设置在最后一层，防止覆盖
    <!-- html -->
<body>

<div class="centent"></div>

</body>
    /* css */
body {
margin: 0;
background: url(../images/idx_bg.jpg) no-repeat;
}

.centent {
width: 1920px;
height: 941px;
background: url(../images/logo.png) center 45px no-repeat,
url(../images/Garen.png) no-repeat left bottom,
url(../images/Thresh.png) no-repeat right bottom,
url(../images/ashe.png) no-repeat 340px bottom,
url(../images/LeeSin.png) no-repeat 985px;
margin: 0 auto;
}

    效果图（Chrome浏览器）

    持续更新…

    该篇主要讲的是背景图片的相关属性。

    最后，若有不足或者不正之处，欢迎指正批评，感激不尽！如果有疑问欢迎留言。

    这是上面多背景设置例子所使用的素材
    下载链接

    往期博客

    下面这些是我学习CSS的网站，希望对大家有帮助

    • CSS Reference(https://cssreference.io/)
    • MDN(https://developer.mozilla.org/zh-CN/docs/Web/CSS)
    • 菜鸟教程(https://www.runoob.com/css/css-tutorial.html)
    • 点赞
    • 收藏
    • 分享
    • 文章举报
    Dream_ruins 发布了12 篇原创文章 · 获赞 1 · 访问量 198 私信 关注
    内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
    标签： 
    相关文章推荐
    新的分享
    章节导航