• HTML、CSS知识点,面试开发都会需要--No.6 设置背景


    No.6 设置背景


    1.background

        (1)如何设置背景:背景可通过color、image、gradient渐变或者组合方法设置。

        (2)background-color:颜色格式可以是十六进制或者rgb以及rgba。为了保证兼容性,有些浏览器不支持rgba,需要在设置rgba之前添加一个十六进制设置。如下:

    div {
      background-color: #b2b2b2;
      background-color: rgba(0, 0, 0, .3);
    }

        (3)background-image:通过添加背景图片来设置背景。例如:

    div {
      background-image: url("alert.png");
    }

        (4)background-repeat:设置图片重复形式,包含的值有repeat, repeat-x, repeat-y, and no-repeat,repeat是默认值,表示水平和垂直都重复。

        (5)background-position:把背景通过元素左上角的偏移位置定位背景显示位子。包含两个值,分别是水平和垂直的偏移值。下面的代表表示,元素的背景色从左上角开始向右偏移20个像素,向下偏移10个像素。

    div {
      background-image: url("alert.png");
      background-position: 20px 10px;
      background-repeat: no-repeat;
    }

        下面的代码表示水平偏移20个像素,垂直为默认的50%。

    div{
        background-position: 20px;
    }

        (6)background-position关键字参数:参数可为top、right、bottom、left、center关键字, pixels, percentages或者任意长度单位。关键字和百分比很相似,例如:left top(0, 0)、right top(100%, 0)、left bottom(0, 100%)、right bottom(100%, 100%)。

        (7)background缩写:缩写的属性顺序为background-color background-image background-position background-repeat。下面代码表示背景色为#b2b2b2,背景图片为url("alert.png"),position为水平偏移20像素、垂直偏移10像素,重复属性值为no-repeat。

        (8)多背景设置:多个背景图片设置通过“,”分隔,最前面的图片展示在最上面,最后的图片展示在最下边。如下代码所示:

    div {
        background: url("foreground.png") 0 0 no-repeat, url("middle-ground.png") 0 0 no-repeat, url("background.png") 0 0 no-repeat;
    }

    2.线性渐变效果

        (1)linear-gradient函数:默认从top到bottom渐变,可以添加多个颜色。如下代码:

    复制代码
    div {
        background: #466368;
        background: -webkit-linear-gradient(#648880, #293f50);
        background: -moz-linear-gradient(#648880, #293f50);
        background: linear-gradient(#648880, #293f50);
    }
    复制代码

        (2)兼容性:有些浏览器不支持渐变效果,一般都需要在最前头添加一个单色的背景,例如上面代码添加的background: #466368。

        (3)改变渐变方向:linear-gradient的第一个参数可改变方向,参数使用:to 方向。例如下面的代码让渐变从左上角渐变到右下角。

    div {
        background: #466368;
        background: linear-gradient(to right bottom, #648880, #293f50);
    }

        (4)添加多个渐变颜色:linear-gradient方法可添加多个渐变颜色。参考代码如下:

    linear-gradient(to right, #f6f1d3, #648880, #293f50);

        (5)渐变占比:可以设置渐变颜色在整个渐变隧道的占比,例如下面代码的第二个颜色占比85%。

    div{
        linear-gradient(to right, #f6f1d3, #648880 85%, #293f50);
    }

    3.放射性渐变

        (1)radial-gradient:radial-gradient提供了反射性渐变函数,参数可接收多个颜色。

        (2)参数说明:第一个参数设置绝对中心位置的颜色,第二个参数设置最外层颜色,最终效果是从中心位置向外过度转换。

    4.CSS3 背景新属性

        background-size: 设置背景相对于元素的大小,包含width和height两个值,值可以是数字或者关键字。例如下面设置元素的背景宽度自适应,高度占元素高度的75%。

    div{
        background-size: auto 75%;
    }
  • 相关阅读:
    数据结构实验报告(四)
    数据结构实验报告(三)
    数据结构实验报告(一)
    数据结构实验报告(二)
    Java基础之排序
    1070 Mooncake
    1071 Speech Patterns
    1438. Longest Continuous Subarray With Absolute Diff Less Than or Equal to Limit
    5403. Find the Kth Smallest Sum of a Matrix With Sorted Rows
    1072 Gas Station
  • 原文地址:https://www.cnblogs.com/CCxi/p/5512520.html
Copyright © 2020-2023  润新知