背景相关属性

最新推荐文章于 2024-05-30 15:07:12 发布

@彤管

最新推荐文章于 2024-05-30 15:07:12 发布

阅读量44

点赞数 1

文章标签：前端 css html

本文链接：https://blog.csdn.net/m0_58258716/article/details/131849333

版权

1. 背景颜色

属性名：background-color(bgc)

属性值：

颜色取值：关键字、rgb表示法、rgba表示法、十六进制……

注意点：

背景颜色默认值是透明：rgba(0,0,0,0)、transparent
背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>背景颜色</title>
     <style>
         div{
             width: 400px;
             height: 400px;
             /* background-color: pink; */
             /* background-color: #ccc; */
             background-color: rgba(0,0,0,.5);
         }
     </style>
 </head>
 <body>
     <div>div</div>
 </body>
 </html>

2. 背景图片

属性名：background-image(bgi) 属性值：background-image：url('图片的路径'); 注意点：

背景图片中url中可以省略引号
背景图片默认是在水平和垂直方向平铺的
背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>背景图片</title>
     <style>
         div{
             width: 400px;
             height: 400px;
             background-color: pink;
             background-image: url(./images/1.jpg);
         }
     </style>
 </head>
 <body>
     <div>文字</div>
 </body>
 </html>

3. 背景平铺

属性名：background-repeat(bgr) 属性值：

取值	效果
repeat	(默认值)水平和垂直方向都平铺
no-repeat	不平铺
repeat-x	沿着水平方向(x轴)平铺
repeat-y	沿着垂直方向(y轴)平铺

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>背景平铺</title>
     <style>
         div{
             width: 400px;
             height: 400px;
             background-image: url('./images/1.jpg');
             background-color: pink;
             background-repeat: no-repeat;
         }
     </style>
 </head>
 <body>
     <div></div>
 </body>
 </html>

4. 背景位置

属性名：background-position(bgp) 属性值：background-position: 水平方向位置垂直方向位置;

注意点：

方位名词取值和坐标取值可以混使用，第一个取值表示水平，第二个取值表示垂直

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>背景位置</title>
     <style>
         div{
             width: 400px;
             height: 400px;
             background-color: pink;
             background-image: url(./images/1.jpg);
             background-repeat: no-repeat;
             /* background-position: center; */
             /* background-position: 50px 100px; */
             background-position: -50px 100px;
             /* 整数：向右向下移动，负数：向左向上移动 */
             /* 注意：背景色和背景图只显示在盒子里面 */
         }
     </style>
 </head>
 <body>
     <div>文字</div>
 </body>
 </html>

5. 背景相关属性的连写形式

属性名：background(bg)

属性值：

单个属性值的合写，取值之间以空格隔开

书写顺序:

推荐：background: color image repeat position

省略问题:

可以按照需求省略
特殊情况：在pc端，如果盒子大小和背景图

注意点:

如果需要设置单独的样式和连写
1. 要么把单独的样式写在连写的下面
2. 要么把单独的样式写在连写的里面

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>背景相关属性连写</title>
     <style>
         div{
             width: 400px;
             height: 400px;
             /* 部分先后顺序 背景色 背景图 背景图平铺 背景图位置 */
             /* background: pink url(./images/1.jpg) no-repeat center bottom; */
             /* 背景图位置如果是英文单词可以颠倒顺序 */
             background: pink url(./images/1.jpg) no-repeat bottom center ;
             /* 测试背景图位置如果是数值，不要颠倒顺序 */
             /* 水平50px，垂直100px */
             /* background: pink url(./images/1.jpg) no-repeat 50px 100px ; */
             background: pink url(./images/1.jpg) no-repeat 100px 50px ;
 
         }
 
     </style>
 </head>
 <body>
     <div></div>
 </body>
 </html>

6. (拓展) img标签和背景图片的区别

需求：需要在网页中展示一张图片的效果？

方法一：直接写上img标签即可

img标签是一个标签，不设置宽高默认会以原尺寸显示

方法二：div标签+背景图片

需要设置div的宽高，因为背景图片只是装饰的CSS样式，不能撑开div标签

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>img标签和背景图片的区别</title>
     <style>
         div{
             width: 300px;
             height: 300px;
             background-image: url(./images/1.jpg);
         }
     </style>
 </head>
 <body>
     <img src="./images/1.jpg">
     <div></div>
 </body>
 </html>