《CSS学习之路》006-背景与渐变

猫哥的技术博客
183 阅读3分钟

设置背景色

  • 设置背景色可以使用如下代码
div {
    width: 200px;
    height: 200px;
    border: 5px solid black;
    background-color: red;
}
  • 颜色可以是单词, 可以是十六进制#ddd, 也可以是rgb或者rgba

设置背景图像

  • 代码如下
div {
    width: 300px;
    height: 300px;
    border: 5px solid black;
    background-image: url(http://pic1.zhimg.com/50/v2-1c843fcfd6d56bebbddbc3e83c0b75b1_hd.jpg);
}
  • 语法, url 中的图片路径, 可以加上引号, 也可以不加
background-image: url(图片路径);
  • 背景图片不会因为大, 就把 div 撑开

  • 如果想让背景正好和 div 一致, 可以设置背景尺寸
background-size: 宽 高;
  • 宽高和 div 的宽高一致即可

设置背景是否包含边框

  • 默认背景是包含边框的

image-20200407095708399

  • 如果不想让背景包含在边框里, 可以进行如下设置
background-clip: padding-box;

image-20200407095854180

  • background-clip常用的属性值有三个
border-box: 包含边框(默认)
padding-box: 不包含边框
content-box: 紧贴文字, 当有padding的时候, 比较明显

背景图的重复设置

  • 如果 div 比较大, 但是背景图比较小, 会出现重复的现象

  • 你可以使用background-repeat进行设置, 常用的属性值如下
值 描述
repeat 默认。背景图像将在垂直方向和水平方向重复。
repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。

把背景图设置成水印

  • 如果文字较长, 我们需要滚动才能看完

  • 当我们设置背景图的时候, 默认背景图会随着文字滚动

  • 我们希望背景图不动
  • 可以使用background-attachment: fixed; 来设置

设置背景图片的位置

  • 可以使用background-position来设置背景图片的位置
  • 语法如下
background-position: X轴向右像素, Y轴向下像素;
  • 默认左上, 支持像素

  • 像素支持负值, 表示 X 轴向左, Y 轴向上

  • 支持百分比

  • 支持单词
X轴: left center right ==> 左中右
Y轴: top center bottom ==> 上中下

background-size中 cover 和 cotain

  • cover保证图片会占满背景

  • contain 保证图片可以显示完全

定义多张背景图片

  • 可以定义多张背景图片
background-img: url("第一张图片的路径"), url("第二张图片的路径");
background-position: 第一张图片的位置, 第二张图片的位置;

设置盒子阴影

  • 使用box-shadow来设置阴影
  • 语法如下
box-shadow: X轴偏移像素, Y轴偏移像素, 模糊度像素, 颜色;

  • 偏移像素支持负值

  • 如果不设置偏移量, 四周都会有阴影

设置背景渐变色

  • 使用background: linear-gradient();, 可以设置线性渐变
  • 语法如下
background: linear-gradient(方向, 渐变色1, 渐变色2...);
  • 方向支持单词, 比如 to bottom right, 从左上向右下

设置渐变的标识位

  • 如下的例子, 红黄各站百分之五十
  • 从左往右, 红色逐渐变浅
  • 从右往左, 黄色逐渐变浅

  • 尝试如下代码, 就变成了这样
background: linear-gradient(to right, red 50%, yellow 50%);

  • 代码的含义
background: linear-gradient(方向, 颜色1 标识位, 颜色2 标识位);

  • 含义是从红到黄开始渐变, 起始位置位 50%到 50%, 等于没有渐变
  • 下面两段代码是等价的
background: linear-gradient(to right, red, yellow);

background: linear-gradient(to right, red 0%, yellow 100%);

  • 再来看一个例子, 可以有更直观的感受

渐变过渡的中间点

  • 颜色发生改变的位置

  • css 代码如下
background: linear-gradient(to right, red, 80%, yellow);
  • 含义
background: linear-gradient(方向, 颜色1, 中间点, 颜色2);

  • 来看一个更直观的例子

avatar
文章
阅读
粉丝