CSS3 背景

你的名字 2024-02-17 20:59 25阅读 0赞

**一、background-image属性设置一个元素的背景图像。**

元素的背景是元素的总大小，包括填充和边界（但不包括边距）。

默认情况下，background-image放置在元素的左上角，并重复垂直和水平方向

**二、background-size属性指定背景图片大小。**

**![Center][]**

**index.html**

<style type="text/css">
      div{
    	   width:30%;
    	   height:250px; /* div大小 */
    	   margin:15px;
    	   border:3px double red;
    	   float:left;
      }
     
    /*background-image属性添加背景图片。
    不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。*/
     div:nth-of-type(1){
    	
    	 background-image:url(img_flwr.gif),url(5.jpg);  /* 花，背景 */
    	 background-repeat:no-repeat; /* 两个图片不平铺 */
    	 background-position:right bottom,left top;  /*相对位置花在右下角； 背景在左上角 */ 
     }
     
     
    /* background-size指定背景图像的大小。CSS3以前，背景图像大小由图像的实际大小决定。
    CSS3中可以指定背景图片，让我们重新在不同的环境中指定背景图片的大小。您可以指定像素
    或百分比大小。*/
    div:nth-of-type(2){
    	background:url(img_flwr.gif) no-repeat;
    	background-size:80px 60px;   /* 重置背景图像： */
    	padding-top:50px;
    	
    }
    
    div:nth-of-type(3){
    	background:url(img_flwr.gif) no-repeat;
    	background-size:100% 100%; /*伸展背景图像完全填充内容区域：*/
    	padding-top:50px;
    	
    }
    </style>
    </head>
    
    <body>
    <div>
    <h1>one Lorem Ipsum Dolor</h1>
    </div>
    <div>
    <p> two 你指定的大小是相对于父元素的宽度和高度的百分比的大小</p>
    原来图片：<img src="img_flwr.gif" width="224" height="162">
    
    </div>
    
    <div>
    <p> three 你指定的大小是相对于父元素的宽度和高度的百分比的大小</p>
    </div>

效果

*one :多张图片*

*two:重置背景图像*

*three :伸展背景图像完全填充内容区域*

**![Center 1][]**

[Center]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/1725fa0c290345408119f16aa2f8d645.png
[Center 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/431ef164535c477a9acc840974195dcc.png

发表评论取消回复

表情：

评论列表（有 0 条评论，25人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS3 背景

一、background-image属性设置一个元素的背景图像。元素的背景是元素的总大小，包括填充和边界（但不包括边距）。默认情况下，background-image放

你的名字/ 2024年02月17日 20:59/ 0 赞/ 26 阅读

相关 CSS3-背景原点、背景裁剪

`background-origin` 用于设置背景图像相对于什么位置来定位（背景图的起点）。语法： background-origin: padding-box

￡神魔★判官ぃ/ 2023年07月02日 04:28/ 0 赞/ 11 阅读

相关 css3背景background

背景图片（background-image）在css3中背景图片可以放置多张图片，`background-image: url(image1.jpg,image2.jp

ゞ浴缸里的玫瑰/ 2023年06月25日 06:25/ 0 赞/ 84 阅读

相关 css3背景渐变

从上到下的线性渐变： background: linear-gradient(red, blue); /\ 标准的语法 \/ 线性渐变 - 从左到右 backgrou

╰+攻爆jí腚メ/ 2023年06月19日 04:26/ 0 赞/ 5 阅读

相关 css3背景色渐变属性_背景色（CSS属性）

css3背景色渐变属性描述 (Description) This property sets the `background-color` of an element

柔光的暖阳◎/ 2022年12月03日 01:56/ 0 赞/ 300 阅读

相关 CSS3 背景和边框

CSS3完全向后兼容，因此不必改变现有的设计。 css3中的模块：选择器，框模型，背景和边框，文本效果，2D/3D转换，动画，多列布局，用户界面 1. 边框

叁歲伎倆/ 2022年09月21日 05:36/ 0 赞/ 204 阅读

相关 css3_边框与背景

Css3只能在ie8以上的版本才能用。 1. 边框圆角 <div class="radius">边框圆角</div> .radius\{width:200px;heigh

Myth丶恋晨/ 2022年05月25日 05:11/ 0 赞/ 235 阅读

相关【CSS3】背景

CSS3 背景 CSS3中包含几个新的背景属性，提供更大背景元素控制。在本章您将了解以下背景属性： ![在这里插入图片描述][2019030514214541.

冷不防/ 2022年03月12日 06:48/ 0 赞/ 302 阅读

相关 css3渐变背景色

> 好久没写关于css的博客了，因为一个app的需要，自己要做一个动态的渐变背景块，所以算是重新学习了渐变类的css。首先说一下这个背景：vue项目中，考虑到兼容性，

傷城~/ 2022年01月23日 12:51/ 0 赞/ 406 阅读

相关 CSS3背景，渐变

1，有利于代码维护，有利于使用debug进行调试打断点。 2，后面三个都存在计算，所以分开写最好。背景复合属性最好的写法， background:\abcdef

﹏ヽ暗。殇╰゛Y/ 2021年12月20日 01:04/ 0 赞/ 426 阅读