首页 > 代码库 > 《图解CSS3——第4章 CSS3背景-1》

《图解CSS3——第4章 CSS3背景-1》

2024-08-27 00:25:41   221人阅读

CSS3背景

4.1 CSS3背景属性简介

background是一个使用率很高的属性，也是一个十分有用的属性，能帮助设计师实现一些特殊的效果，使用起来也非常简单。

4.1.1 背景的基本属性

背景主要包括五个属性：

  1. background-color（背景颜色）
  2. background-image（背景图片）
  3. background-repeat（背景图片展示方式）
  4. background-attachment（背景图片是固定还是滚动）
  5. background-position（背景图片位置）

可以单独写，也可以将这些属性串在一起使用。

barckground : <background-color> [,<background-image>] [,<background-repeat>] [,<background-attachment>] [,<background-position>]

1、background-color 属性

background-color : transparent || <color>

用来设置元素的背景颜色，其默认值为“transparent，不设置任何颜色情况下是透明色，<color>用来设计背景色彩，常用的颜色格式如下：

  • 颜色命：如 “red”
  • rgb色：如 rgb(255, 0, 0) 或 rgb(100% 0%, 0%)
  • hls值：如 hsl(0,100%, 50%)
  • 十六进制值：如 #ff0000 在css3中还是可以使用rgba色。

2、background-image 属性

background-image : none || <url>

用来设置元素的背景图片，默认值为“none”，<url>是指背景图片的地址，这个地址可以是相对地址，也可以是绝对地址。

3、background-repeat 属性

background-repeat : repeat || repeat-x || repeat-y || no-repeat

用来设置元素的背景图片在元素的盒模型中的铺放格式，其默认值为“repeat”，也就是背景图片沿元素的X轴和Y轴同时平铺，“repeat-x”表示的是元素背景图片沿元素的X轴平铺，Y轴不进行任何铺放；“repeat-y”刚好相反，元素背景图片沿元素的Y轴平铺，X轴不进行任何铺放；“no-repeat”和默认值“repeat”相反，表示背景图片不做任何铺放。

4、background-attachment 属性

background-attachment : scroll || fixed

用来设置元素背景图片是否固定或者随着页面的其余部分滚动，其默认值为“scroll”，表示背景图片会随着浏览器滚动条一起滚动，而取值为“fixed”时，背景图片固定不动（取值为“fixed”时，一般用在html 或 body上，使用在其他标签上不能达到固定效果）。

5、background-position 属性

background-position : <percentage> || <length> || <left|center|right> [,top|center|bottom]

background-position主要是用为设置背景图片的位置，其默认值为(0,0)||(0%,0%)||(left top),可以进行具体的百分数或数值设置，也可以使用left,center,top,right,top,bottom配合设置，而其中以下几种表示相同定位方式：

      • "top left","left top"和"0% 0%","0,0"代表元素的左上角；
      • "top","top center","center top"和"50% 0"表示在元素顶边居中位置；
      • "right top","top right"和"100% 0"代元素的是元素的右上角位置；
      • "left","left center","center left"和"0% 50%"表示在元素左边中间位置；
      • "center","center center"和"50% 50%"表示在元素中间位置；
      • "right","right center","center,right"和"100% 50%"表示在元素右边中间位置；
      • "bottom left","left bottom"和"0% 100%"表示在元素的左下角；
      • "bottom","bottom center","center bottom"和"50% 100%"表示在元素的底下中间点位置；

      • "bottom right"，"right bottom"和“100％ 100％”表示在元素右下角位置

        技术分享

        4.1.2 与背景相关的新增属性

        在CSS3中，background属性依然保持以前的用法，只是追加了一些与背景相关的属性。

        • background-origin：指定绘制背景图片的起点
        • background-clip：指定背景图片的显示范围
        • background-size：指定背景图片的尺寸大小
        • background-break：指定内联元素的背景图片进行平铺时的循环方式

         

         <head>        <meta charset="UTF-8">        <title>background-position 演示效果</title>        <style>                        *{margin: 0;padding: 0;}            body{padding: 100px;}            ul{list-style: none;}            li{width: 200px;height: 200px;float: left;margin: 20px;                background-color: orange;                background-image: url(http://7xr9pe.com1.z0.glb.clouddn.com/logo100.jpg);                background-repeat: no-repeat;            }            .no1{background-position: left top;}            .no2{background-position: top center;}            .no3{background-position: right top;}            .no4{background-position: left center;}            .no5{background-position: center;}            .no6{background-position: right center;}            .no7{background-position: bottom left;}            .no8{background-position: bottom center;}            .no9{background-position: bottom right;}            */        </style>    </head>    <body>        <ul>            <li class="no1"></li>            <li class="no2"></li>            <li class="no3"></li>            <li class="no4"></li>            <li class="no5"></li>            <li class="no6"></li>            <li class="no7"></li>            <li class="no8"></li>            <li class="no9"></li>        </ul>    </body>    </html>

         

<style></style>

《图解CSS3——第4章 CSS3背景-1》


联系
我们