CSS设置背景颜色及图像 背景图像的定位、固定、大小、显示区域、裁剪

鳄鱼君Ba

发表文章数:519

热门标签

,

Vieu四代商业主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买
首页 » CSS和CSS3教程 » CSS设置背景颜色及图像 背景图像的定位、固定、大小、显示区域、裁剪

对于任何一个页面来说,都需要用背景色或者背景图来定制页面的基调,那么如何使用CSS控制背景颜色呢?一起跟着鳄鱼君来学习一下吧!

背景颜色

CSS中使用background-color属性来定义对象的背景颜色。background-color语法:

background-color:transparent/color;
transparent-默认值 透明的
color-设置方法与文字颜色设置方法是一样的,颜色名、十六进制、RGB/RGB4/HSL/HSLA等

简单的演示喜用方法:

<style type="text/css">
    body{
        margin: 0;
        padding: 0;
        text-align: center;  /*网页居中*/
        background-color: #f5f7f7;  
        } 
    #header{
        height: 50px;  /*固定高度*/
        line-height: 40px; /*定义行高*/
        margin: 0 0 2px 0;  /*头部区域的外边距*/
        text-align: center; /*文本居中对齐*/
        background-color: #131513;   
        color: red;  /*字体颜色*/
    }
    ul.nav {
        list-style: none;  /*清楚项目符号*/
        margin: 0;  /*导航栏外边距*/
        padding: 10px 10px;  /*导航栏内边距*/
        float: left;  /*向左浮动*/
        width: 80px; /*定义宽度*/
        height: 200px; /*定义高度*/
        background-color: #CCFF33;
            }
    ul.nav li{
        line-height: 1.5em;  /*导航行高*/
    }
    
    #main {
        margin:0 109px;
        padding: 12px 2em;  /*主体区域内边距*/
        background-color: #FF99CC;
    }
</style>
<div id="xxoo">
    <p id="header">网页标题</p>  /*网页标题用h1标签*/
    <ul class="nav">
        <li>链接1</li>
        <li>链接2</li>
        <li>链接3</li>
    </ul>
    <div id="main">
        <p>正文内容</p>
    </div>
</div>

背景图像

在CSS中还可以将图像作为网页元素的背景,通过background-image属性实现。它的基本语法格式如下:

background-image: url( )  / none
url 定义的是图像的路径,可以是绝对路径,也可以是相对路径
none 表示不设置背景图像

背景图像主要是用来修饰或点缀,使用背景图可以美化页面,设计艺术效果,带给用户一个良好的体验!定义背景图像的平铺方式,可灵活的使用背景图像,更方便的对页面进行美化与设计,背景图像默认会在横向和纵向上平铺,这点需要注意。CSS使用background-repeat属性来定义背景图像的平铺方式。它通常有以下几个属性值:

  • repeat-x :表示的是背景图像在横向上平铺。
  • repeat-y:表示的是背景图像在纵向上平铺。
  • repeat:表示的是背景图像在横向和纵向上平铺。
  • no-repeat:表示的是背景图像不平铺。

简单的案例:

<style type="text/css">
    body{
        background-image: url("1.png");  /*本地的路径*/
        background-repeat: no-repeat;  /*图像不平铺*/
    }
</style>

背景图像的定位

CSS使用background-position属性来定位背景图像的显示位置。它的基本语法如下:

background-position: percentage(百分数) / length(具体的值)
background-position: center /left /right /top /bottom

属性值可以为单位数值、预定义的关键字、百分比:

  • 单位数值:设置图像左上角在元素中的坐标,列如background-position;20px 20px;
  • 预定义的关键字:水平方向值(left、center、right),垂直方向值(top、center、bottom)

百分比:

  • 0% 0%:图像左上角与元素的左上角对齐;
  • 50% 50%:图像50% 50%中心点与元素50% 50%的中心点对齐;
  • 20% 30%:图像20% 30%的点与元素20% 30%的点对齐;
  • 100% 100%:图像右下角与元素的右下角对其,而不是图像充满元素。

背景图像的固定

如果希望背景图像固定在屏幕的某一位置,不随着滚动条而滚动,可以使用background-attachment属性来定义背景图像在浏览器窗口中的固定位置,来看一下它的基本语法:

background-attachment:fixed /scroll / local
  • fixed:背景图像相对于窗口固定。
  • scroll:背景图像相对于元素,也就是说当前元素内容滚动的时候背景图像不会跟着滚动,因为背景图像总是要跟着元素本身,但会随着元素的祖先元素或窗口一起滚动。
  • local:背景图像相对于元素内容固定,也就是说当元素滚动时背景图像也会跟着滚动,因为背景图像总是要跟着内容。
<style type="text/css">
    body{
        background-image: url("1.png");  /*本地的路径*/
        background-repeat: no-repeat;  /*背景图像不平铺*/
        background-position: top center; /*图像位于窗口顶部 居中*/
        background-attachment: fixed;   /*图像相对于窗口固定*/
    }
    #content{
        height: 2000px;
        border: solid 1px red;

</style>
<div id="content"></div>

背景图像的大小

在CSS2以及之前的版本中,背景图像的大小是不可以控制的,想要设置背景图像填充元素的区域,只能预算较大的背景图像,或者让背景图像以平铺的方式填充,操作起来繁琐而且不方便。那么在CSS3中使用background-size属性来设置背景图像的大小。它的基本语法格式为:background-size:属性值1 属性值2;对于属性值可以为以下几种:

  • 像素值:设置背景图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会默认为auto。
  • 百分比:以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值默认为auto。
  • cover:把背景图像扩展至足够大,使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
  • contain:把图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。

背景图像的显示区域

在默认情况下,background-position属性是以元素左上角为坐标原点定位背景图像,运用CSS3中的background-origin属性可以改变这种定位方式,自定义背景图像的相对位置。它的基本语法格式为:backg-origin:属性值;属性值有三种取值:

  • padding-box:背景图像相对于内边距区域来定位。
  • border-box:背景图像相对于边框来定位。
  • content-box:背景图像相对于内容框来定位。

背景图像的剪裁

CSS使用background-clip属性来定义背景图像的剪裁区域,它的基本语法为:background-clip:属性值;在语法格式上background-origin属性background-clip属性的取值相似,但含义不同,具体解释如下:

  • border-box:默认值,从边框区域向外剪裁背景。
  • padding-box:从补白区域(内边距)向外剪裁背景。
  • content-box:从内容区域向外剪裁背景。
  • text:从前景内容区域向外剪裁背景。
<style type="text/css">
    strong{
        font-size: 20px;
    }
    p{
        width: 40px;
        height: 50px;
        margin: 0;
        padding: 20px;
        border: solid 1px red;
        background:#aaa url("2.jpg") no-repeat;
    }
    .border-box p{
        background-clip: border-box; /*从边框区域向外裁剪*/
    }
    .padding-box p{
        background-clip: padding-box; /*从补白区域向外裁剪*/
    }
    .content-box p{
        background-clip: content-box;  /*从内容区域向外裁剪*/
    }
    .text p{
        background-clip: text;
        width: 300px;
        height: 200px;
        background-repeat: repeat;
        font-weight: bold;
        font-size: 20px;
    }
</style>

<strong>background-cli</strong> 
<ul class="text">
    <li class="border-box">
        <strong>borred-box</strong>
        <p>从border区域(不含border)开始向外剪裁背景</p>
    </li>
    <li class="padding-box">
        <strong>padding-box</strong>
        <p>从padding区域(不含padding)开始向外剪裁背景</p>
    </li>
    <li class="content-box">
        <strong>content-box</strong>
        <p>从content区域开始向外剪裁背景</p>
    </li>
    <li class="text">
        <strong>content-box</strong>
        <p>从前景内容的形状作为剪裁区域向外剪裁背景</p>
    </li>
    
</ul>

多重背景图像

在CSS3之前的版本中,一个容器只能填充一张背景图像,如果是重复设置,后设置的图像将会覆盖之前的背景图像。CSS3中增强了背景图像的功能,允许一个容器里显示多个背景图像,使背景图像的效果更容易控制,但是CSS3中并没有为实现多个背景图像提供相对应的属性,而是通过background-image、background-repeat、background-position和background-size等属性提供多个属性值可以实现多重背景图像效果,个属性值之间用逗号“,”隔开。例如:

background-image:
url(images/cao.jpg),
url(images/ta.jpg),
url(images/cao.jpg);

同边框一样,CSS背景图像也是一个复合属性,可以将背景相关的样式都综合定义在一个复合属性background中。具体使用方法如下,对于不需要的样式可不予定义:

background:
[background-color]
[background-image]
[background-repeat]
[background-attachment]
[background-position]
[background-size]
[background-clip]
[background-origin]

未经允许不得转载:作者:鳄鱼君Ba, 转载或复制请以 超链接形式 并注明出处 鳄鱼君Ba
原文地址:《CSS设置背景颜色及图像 背景图像的定位、固定、大小、显示区域、裁剪》 发布于2020-04-08

分享到:
赞(1) 赏杯咖啡

评论 抢沙发

2 + 9 =


文章对你有帮助可赏作者一杯咖啡

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.6主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册