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

背景

文章目录

  • 背景
    • 一、主要属性
      • 1. background-color
      • 2. background-image
      • 3. background-repeat
      • 4. background-position
      • 5. background-size
      • 6. background-attachment
      • 7. background-clip
      • 8. background(简写属性)
      • 9.多背景设置
  • 持续更新...

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

一、主要属性

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 中支持多背景设置

注意点:

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

<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规则基本语法
  • CSS选择器
  • font 和 text 相关属性
  • 盒子模型

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

  • CSS Reference(https://cssreference.io/)
  • MDN(https://developer.mozilla.org/zh-CN/docs/Web/CSS)
  • 菜鸟教程(https://www.runoob.com/css/css-tutorial.html)

你可能感兴趣的:(前端学习,CSS,笔记)