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

最新推荐文章于 2023-02-01 10:11:58 发布

Dream_ruins

最新推荐文章于 2023-02-01 10:11:58 发布

阅读量758

点赞数 1

分类专栏：前端学习 CSS 笔记文章标签： css css3

本文链接：https://blog.csdn.net/weixin_43662760/article/details/105099585

版权

前端学习同时被 3 个专栏收录

14 篇文章 0 订阅

订阅专栏

笔记

14 篇文章 0 订阅

订阅专栏

CSS

9 篇文章 0 订阅

订阅专栏

背景

文章目录

背景
- 一、主要属性
持续更新...

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

一、主要属性

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（简写属性）

推荐赋值顺序

background-clip
background-color
background-image
background-repeat
background-attachment
background-position
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

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
WEB前端学习:CSS学习_CSS背景图片相关属性

背景文章目录背景一、主要属性1. background-color2. background-image3. background-repeat4. background-position5. background-size6. background-attachment7. background-clip8. background（简写属性）9.多背景设置持续更新...该篇为讲得是背景图片...
复制链接

扫一扫