• 技术文章 >web前端 >css教程

    手把手带你了解CSS 背景属性(Background)

    青灯夜游青灯夜游2022-08-03 16:44:41转载206
    在制作网页时我们往往需要在网页中添加一些背景颜色、背景图像让网页更加美观,吸引访问者的眼球。CSS 中提供了一系列用于设置 HTML 元素背景效果的属性,下面本篇文章就来带大家聊聊CSS 背景属性,希望对大家有所帮助!

    CSS 背景属性

    用于属性名CSS 版本浏览器支持
    1.在一个声明中设置 所有的背景属性background1IE8- 不支持多个背景图像。IE7- 不支持"inherit"。
    2.背景图像是否 固定或者随着页面的其余部分 滚动background-attachment1IE 不支持属性值 “inherit”。
    3.元素的 背景颜色background-color1IE 不支持属性值 “inherit”。
    4.元素的 背景图像background-image1IE 不支持属性值 “inherit”。
    5.背景图像的 开始位置background-position1IE 不支持属性值 “inherit”。
    6.是否及如何 重复背景图像。background-repeat1IE 不支持属性值 “inherit”。
    7.背景的 绘制区域background-clip3都支持,IE8- 不支持。
    8.背景图片的 定位区域background-origin3都支持,IE8- 不支持。
    9.背景 图片的尺寸background-size3都支持,IE8- 不支持。

    1. background 属性: 一次性 集中定义 8个 背景相关属性

    <style type="text/css">
        body
        { 
        background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center; 
        }
    </style>






    在这里插入图片描述


    p{
    
    	/*background-image: url(../images/四叶草背景.png);*/
    	/*background-repeat: no-repeat;*/
    
    
    	/*第一个值 水平位置,第二个值 垂直位置*/
    	/*background-position: 50px 100px;	*/
    
    
        /*背景固定*/
    	/*background-attachment: fixed;*/
    	/*background-color: yellow;	*/
    
    	background: url(../images/四叶草背景.png) no-repeat 50px 100px;
    
    }

    在这里插入图片描述


    2. background-color 属性: 元素的 背景颜色 (纯色,范围到 边框区的 外边缘)



    /* 关键字 或 颜色名 Keyword values */
    background-color: red;
    background-color: indigo;
    
    /* 十六进制值 Hexadecimal value  (设置透明值 和 不设置 不透明值) */
    background-color: #bbff00;    /* 完全不透明 Fully opaque (不设置 不透明值)*/
    background-color: #bf0;       /* 完全不透明的 简写 Fully opaque shorthand (不设置 不透明值)*/
    background-color: #11ffee00;  /* 完全透明 Fully transparent (设置 不透明值)*/
    background-color: #1fe0;      /* 完全透明的 简写 Fully transparent shorthand (设置 不透明值) */
    background-color: #11ffeeff;  /* 完全不透明 Fully opaque (设置 不透明值)*/
    background-color: #1fef;      /* 完全不透明的 简写 Fully opaque shorthand (设置 不透明值) */
    
    /* RGB value */
    background-color: rgb(255, 255, 128);        /* 完全不透明 Fully opaque */
    background-color: rgba(117, 190, 218, 0.5);  /* 50%透明 50% transparent (设置 不透明值)*/
    
    /* HSL value */
    background-color: hsl(50, 33%, 25%);         /* 完全不透明 Fully opaque */
    background-color: hsla(50, 33%, 25%, 0.75);  /* 75% transparent (设置 不透明值)*/
    
    /* 特别的关键字 Special keyword values */
    background-color: currentcolor;
    background-color: transparent;
    
    /* 全局性的值 Global values */
    background-color: inherit;
    background-color: initial;
    background-color: unset;





    在这里插入图片描述




    在这里插入图片描述


    .bgimg-fixed {
    
        background-color: pink;    
        background-image: url(../images/四叶草背景.png);    
        background-repeat: no-repeat;
    
    }

    在这里插入图片描述


        /*把十六进制 设置了透明值的 红色,最后两位的 33 就是透明值*/
        background-color: #ff000066;
        background-image: url(../images/四叶草背景.png);
        background-repeat: no-repeat;
    
    }

    在这里插入图片描述


    3. background-image 属性: 背景图像 (范围到 内边距区的 外边缘,不含 边框)

    在这里插入图片描述







    #lizard{
    	background-image: url("../images/lizard.png"), url("../images/star.png");
    }

    在这里插入图片描述


    #lizard{
    	background-image: url("../images/四叶草背景.png"), url("../images/lizard.png");
    	background-repeat: no-repeat,repeat;
    }

    在这里插入图片描述



    在这里插入图片描述


    /* url()方法, 只要 test.jpg 是图像文件*/
    url(test.jpg)  
    
     /*一个 <gradient> 标签*/
     linear-gradient(to bottom, blue, red) 
     
    /*页面的一部分, 使用了element()方法,如果 colonne3 是存在于页面中的一个元素id即可*/
    element(#colonne3)       
    
    image(ltr 'arrow.png#xywh=0,0,16,16', red) 
                                /* <url>的一个16x16节,从原来的左上角开始
    图像只要arrow.png 是一个支持的图像,否则是一个固体
    红色的样布。如果语言是rtl,则图像将水平翻转. */ 
    cross-fade(20% url(twenty.png), url(eighty.png)) 
                                /* 交叉褪色的图像,其中20%是不透明的
    80%是不透明的. */ 
    image-set('test.jpg' 1x, 'test-2x.jpg' 2x)  
                                /* 具有不同分辨率的 图像的选择 */

    4. background-attachment 属性: 背景图像的 固定和滚动



    /* Keyword values */
    background-attachment: scroll;
    background-attachment: fixed;
    background-attachment: local;
    
    /* Global values */
    background-attachment: inherit;
    background-attachment: initial;
    background-attachment: unset;


    在这里插入图片描述

    注释:任何版本的 Internet Explorer (包括 IE8)都不支持属性值 “inherit”。


    .bgimg-fixed{
    	background-image: url(../images/四叶草背景.png);
    	background-attachment: fixed;
    	background-repeat: no-repeat;
    }
        <p class="bgimg-fixed">《花儿为什么这样红》是电影《冰山上的来客》中的一首著名插曲,是塔吉克民歌改编而来。影片从真假古兰丹姆 与战士阿米尔的爱情悬念出发,讲述了边疆战士和杨排长 一起与特务假古兰丹姆斗智斗勇,最终胜利的阿米尔和真古兰丹姆 也得以重逢的故事。该片描绘了 边疆地区军民惊险的反特斗争生活。作曲家雷振邦先生的电影音乐常以民间音乐素材构成音乐主题,也有根据民歌改编发展的,所以具有浓郁的民族风格和地区特色。《花儿为什么这样红》本来是一首古老的塔吉克族民歌,后来由雷振邦先生改编成电影《冰山上的来客》插曲。插曲表现的是电影故事中,一名驻守新疆唐古拉山的解放军边防战士,同当地一名姑娘的一段爱情故事。主要参考了一首古老的塔吉克族民间歌曲《古力碧塔》。《古力碧塔》讲述的是一名为商人赶脚的塔吉克青年,爱上了喀布尔城的一位公主,但遭到了反对,青年只能顺着古丝绸之路流浪,把优美凄凉的歌声传遍了所有他路经的地方,最后传回到帕米尔高原他的故乡。</p>

    在这里插入图片描述


    .bgimg-fixed{
    	background-image:url(../images/greenbgimage.jpg), url(../images/四叶草背景.png);
    	background-attachment: fixed,scroll;
    	background-repeat: no-repeat,repeat-y;
    }

    在这里插入图片描述


    5. background-position 属性: 背景图像的 位置 (先水平,后垂直, 关键词,百分比,长度值)



    /* 关键词 Keyword values */
    background-position: top;
    background-position: bottom;
    background-position: left;
    background-position: right;
    background-position: center;
    
    /* 百分比值 <percentage> values */
    background-position: 25% 75%;
    
    /* 长度值 <length> values */
    background-position: 0 0;
    background-position: 1cm 2cm;
    background-position: 10ch 8em;
    
    /* 多背景图片的 的位置 Multiple images */
    background-position: 0 0, center;
    
    /* 指明 距离 上下左右边缘的 的距离. Edge offsets values */
    background-position: bottom 10px right 20px;
    background-position: right 3em bottom 10px;
    background-position: bottom 10px right;
    background-position: top right 10px;
    
    /* 全局支持的值 Global values */
    background-position: inherit;
    background-position: initial;
    background-position: unset;



    在这里插入图片描述


    .bgimg-fixed {
    
        background-color: #c0c0c0;
        background-image: url("../images/star.png");
        background-repeat: no-repeat;
        /*top = center top */
        background-position: top;
    
    }

    在这里插入图片描述


    .bgimg-fixed {
    
        background-color: #c0c0c0;
        background-image: url("../images/star.png");
        background-repeat: no-repeat;
        /*10% = 10% 50% */
        background-position: 10%;
    
    }

    在这里插入图片描述


    .bgimg-fixed {
    
        background-color: #c0c0c0;
        background-image: url("../images/star.png");
        background-repeat: no-repeat;
        /*关键字 不分先后顺序*/
        background-position: right bottom;
    
    }

    在这里插入图片描述


    .bgimg-fixed {
    
        background-color: #c0c0c0;
        background-image: url("../images/star.png");
        background-repeat: no-repeat;
        /*关键字 不分先后顺序,距离右边缘 10px,距离 下边缘60px */
        background-position: right 10px bottom 60px;
    
    }

    在这里插入图片描述

    在这里插入图片描述


    .bgimg-fixed {
    
        background-color: #c0c0c0;
        background-image: url("../images/star.png"),url("../images/四叶草背景.png");
        background-repeat: no-repeat,no-repeat;
        background-position: right bottom 100px,left 10px bottom 30px;
    
    }

    在这里插入图片描述


    .bgimg-fixed {
    
        background-color: #c0c0c0;
        background-image: url("../images/star.png"),url("../images/四叶草背景.png");
        background-repeat: no-repeat,no-repeat;
        background-position: right bottom -30px,left -30px bottom -30px;
    
    }

    在这里插入图片描述


    6. background-repeat 属性 : 背景图像的 重复方式 (单值,双值,超出部分 裁剪)


    /* 单值语法 */
    background-repeat: repeat-x;
    background-repeat: repeat-y;
    background-repeat: repeat;
    background-repeat: space;
    background-repeat: round;
    background-repeat: no-repeat;
    
    /* 双值语法: 水平 horizontal | 垂直vertical */
    background-repeat: repeat space;
    background-repeat: repeat repeat;
    background-repeat: round space;
    background-repeat: no-repeat round;
    
    background-repeat: inherit;
    单值等价的双值
    repeat-x= repeat no-repeat
    repeat-y= no-repeat repeat
    repeat= repeat repeat
    space= space space
    round= round round
    no-repeat= no-repeat no-repeat


    在这里插入图片描述


    示例1: 把背景图像设置成 round spaceround = round round的区别

    #lizard{
    	/*background-image: url("../images/lizard.png");*/
    	background-image: url("../images/四叶草背景.png");
    	background-repeat:round space;
    }

    在这里插入图片描述

    在这里插入图片描述

    在这里插入图片描述


    7. CSS3 background-clip 属性: 背景色/图像 的 绘制/裁剪 区域 (背景 显示的区域)


    /* 关键字值 Keyword values */
    background-clip: border-box;
    background-clip: padding-box;
    background-clip: content-box;
    background-clip: text;
    
    /* Global values */
    background-clip: inherit;
    background-clip: initial;
    background-clip: unset;


    在这里插入图片描述


    在这里插入图片描述


        <p id="clipTest">天道酬勤, 是一个汉语成语,读作 tiān dào chóu qín。意思是 上天会按照 每个人付出的勤奋,给予相应的酬劳。多一分耕耘,多一分收获,只要你付出了 足够的努力,将来也一定会 得到相应的收获。出自《周易》中的卦辞。</p>
    #clipTest{
    	/*设置元素的 外边距 边框 内边距 字体大小/颜色/粗细*/
    	margin: 20px;
    	border: 10px dashed #000;
    	padding: 20px;
    	font-size: 1.2em;
    	font-weight: bold;
    	color: #fff;
    
    	/*设置 背景图像 和 背景颜色(作为背景图像的回退)*/
    	background-color: #c0c0c0;
    	background-image: url("../images/hand.jpg");
    
    	/*设置背景的 绘制/裁剪 区域*/
    
        /*到 边框区的 外边缘*/
    	background-clip: border-box;
    	
    }

    	/*到 内边距区的 外边缘*/
    	-webkit-background-clip: padding-box;
    	-moz-background-clip: padding-box;
    	background-clip: padding-box;

    在这里插入图片描述




    8. CSS3 background-origin 属性: 背景图像的 原点相对区域 (对 背景色 无效,搭配 background-position )



    /* 关键字值 Keyword values */
    background-origin: border-box;
    background-origin: padding-box;
    background-origin: content-box;
    
    /* Global values */
    background-origin: inherit;
    background-origin: initial;
    background-origin: unset;



    在这里插入图片描述


    #clipTest{
    	/*设置元素的 外边距 边框 内边距 字体大小/颜色/粗细*/
    	margin: 20px;
    	border: 10px dashed #000;
    	padding: 20px;
    	font-size: 1.2em;
    	font-weight: bold;
    	/*color: transparent;*/
    	color: #fff;
    
    	/*设置 背景图像 和 背景颜色(作为背景图像的回退 这里为了看清原点位置,先注释掉)*/
    	/*background-color: #c0c0c0;*/
    	background-image: url("../images/hand.jpg");
    	background-repeat: no-repeat;
    
    
    	/*背景图像的原点 相对位置*/
    
    	-webkit-background-origin: border-box;
    	-moz-background-origin: border-box;
    	background-origin: border-box;
    }



    	-webkit-background-origin: content-box;
    	-moz-background-origin:content-box;
    	background-origin: content-box;
    
    	
    
    	/*背景图像的位置*/
    	background-position:  10px 10px;

    在这里插入图片描述


    9. CSS3 background-size 属性: 背景图像的 大小 (可定义 宽高)


    /* 关键字 */
    background-size: cover
    background-size: contain
    
    /* 一个值: 这个值指定图片的宽度,图片的高度隐式的为auto */
    background-size: 50%
    background-size: 3em
    background-size: 12px
    background-size: auto
    
    /* 两个值 */
    /* 第一个值指定图片的宽度,第二个值指定图片的高度 */
    background-size: 50% auto
    background-size: 3em 25%
    background-size: auto 6px
    background-size: auto auto
    
    /* 逗号分隔的多个值:设置多重背景 */
    background-size: auto, auto     /* 不同于background-size: auto auto */
    background-size: 50%, 25%, 25%
    background-size: 6px, auto, contain
    
    /* 全局属性 */
    background-size: inherit;
    background-size: initial;
    background-size: unset;





    在这里插入图片描述

      background-image: url(bg-image.png);
    
      -webkit-background-size: 100% 100%;           /* Safari 3.0 */
         -moz-background-size: 100% 100%;           /* Gecko 1.9.2 (Firefox 3.6) */
           -o-background-size: 100% 100%;           /* Opera 9.5 */
              background-size: 100% 100%;           /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */

    .gradient-example {
      width: 50px;
      height: 100px;
      background-image: linear-gradient(blue, red);
    
      /* 不能安全使用的 值形式 Not safe to use */
      background-size: 25px;
      background-size: 50%;
      background-size: auto 50px;
      background-size: auto 50%;
    
      /* 能安全使用的 值形式 Safe to use */
      background-size: 25px 50px;
      background-size: 50% 50%;
      }
    #lizard {
        border: 10px dashed #000;
        /*用渐变 做背景图像*/
        background-image: linear-gradient(yellow,green);
        background-color: #c0c0c0;
        background-repeat: no-repeat;
    
        /*背景图像的大小*/
        background-size: 300px 100px;
    }

    #lizard {
        border: 10px dashed #000;
        padding: 10px;
        background-image: url("../images/lizard.png");
        background-color: #c0c0c0;
        background-repeat: no-repeat;
    
        /*背景图像的大小*/
        /*background-size: 200px;*/
    }
    只设置 宽度值: background-size: 200px;(按比例缩放)宽高一起设置: background-size: 200px 100px;(按指定值,可能改变比例)
    裁剪式 完全覆盖: background-size: cover;(按比例缩放)不裁剪式 安全覆盖: background-size: contain;(按比例缩放)

    (学习视频分享:web前端入门

    以上就是手把手带你了解CSS 背景属性(Background)的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:csdn,如有侵犯,请联系admin@php.cn删除
    专题推荐:背景属性 css
    上一篇:详解CSS 文本属性(Text) 下一篇:纯CSS实现多级导航联动(附图文示例)
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• 一起聊聊CSS盒子大小与内外边距及边框的关系• css伪选择器学习之伪类选择器解析• 介绍下CSS盒子模型以及box-sizing属性• 一文详解css中的UI状态伪类选择器• CSS伸缩盒布局(总结分享)• css常用font字体属性有哪些?字体属性详解
    1/1

    PHP中文网