首页 编程相关 正文
我要发布

CSS基础-背景

编程相关
2025-12-13 0 108

背景

background–color

背景颜色， 可以使用十六进制、rgb、rgba表示。

语法 

/**selector  背景元素的原则去*/ /** color  背景颜色的值， 可以是 颜色名称、十六进制值、RGB、RGBA*/ selector { background-color: color;
}

示例 

/** 设置body标签背景为白色 */ body { background-color: white;
} /**设置h1标签背景为红色*/ h1 { background-color: #ff0000;
} /**设置p元素背景颜色为黄色*/ p { background-color: rgb(255, 255, 0);
} /**设置背景颜色为半透明的蓝色*/ div { background-color: rgba(0, 0, 255, 0.5);
}

background-image

背景图片；该属性可以通过图片路径引用一张外部图片。图片路径可以是相对论路径、绝对路径也可以是网络当中图片，支持HTTP协议。

语法 

/**selector  表示选择器*/ /**url 图片路径*/ /**相对路径是书写位置到图片位置的相对路径
*/ selector { background-image: url(url);
}

示例

创建一个网页， 使得body、h1、div 拥有不同的背景图片。

CSS基础-背景 

<!DOCTYPE html>
<html lang=\"en\">
  <head>
    <meta charset=\"UTF-8\" />
    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />
    <title>背景图片演示</title>
    <style> /**相对路径， images目录下必须要有 background-body.jpg 图片*/ body { background-image: url(\"images/background-body.jpg\");
      } /**引用网络当中的图片*/ h1 { width: 100px; height: 100px; background-image: url(\"https://pic4.zhimg.com/v2-bbddbb4b7769475ccb591cc39106b146_r.jpg?source=1940ef5c\");
      } /**使用 linear-gradient 渐变函数*/ div { width: 100px; height: 100px; background-image: linear-gradient(to right, red, orange, yellow);
      }
    </style>
  </head>
  <body>
    <h1></h1>
    <div></div>
  </body>
</html>

线性渐变

background-image属性可以使用 linear-gradient()形式创建线性渐变背景。 

background-image: linear-gradient(to right, blue, red)
                                    渐变方向 开始颜色 结束颜色 #渐变方向也可以用度数表示 background-image:  linear-gradient(45deg, blue, red) #可以有多个颜色值 background-image: linear-gradient(to right, blue, yellow 20%, red)
																										表示中间色

linear-gradient 的详细用法可以参考 地址：https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient/linear-gradient

backgroud-repeat 重复方式

background-repeat 属性用来设置背景的重复模式。

值 意义
repeat; x、y均平铺（默认）
repeat-x; x平铺
repeat-y; y平铺
no-repeat; 不平铺

示例

CSS基础-背景 

<!DOCTYPE html>
<html lang=\"en\">
  <head>
    <meta charset=\"UTF-8\" />
    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />
    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />
    <title>背景是否重复背景展示</title>
    <style> div { border: 1px solid red; width: 900px; height: 600px; margin-bottom: 10px; background: transparent url(https://ts1.cn.mm.bing.net/th/id/R-C.2fb5b20787d386d13c553acd9195367b?rik=SVaO4tCMUb4Wrw&riu=http%3a%2f%2fpic.616pic.com%2fys_img%2f00%2f18%2f72%2fVSjXnSgVHI.jpg&ehk=IeIi2DES5PyvRSxSW1k74c0befZUHhZdHWklbVTPQXM%3d&risl=&pid=ImgRaw&r=0);
      } .box1 { background-repeat: repeat;
      } .box2 { background-repeat: repeat-x;
      } .box3 { background-repeat: repeat-y;
      } .box4 { background-repeat: no-repeat;
      } body { background-image: url(https://pic4.zhimg.com/v2-bbddbb4b7769475ccb591cc39106b146_r.jpg?source=1940ef5c);
      }
    </style>
  </head>
  <body>
    <div class=\"box1\">box1背景重复(默认)</div>
    <div class=\"box2\">box2背景X轴重复</div>
    <div class=\"box3\">box3背景Y轴重复</div>
    <div class=\"box4\">box4背景不重复</div>
  </body>
</html>

background-size 背景尺寸

  • background-size 属性用来设置 背景图片的尺寸，兼容到IE9。
  • background-size 的值可以用像素表示，也可以用百分比表示，表示为盒子宽、高的百分之多少。
  • 需要等比例的值，用auto代替。
  • contain 特殊值， 背景智能改变尺寸以容纳到盒子里， 可能背景会出现空白区域。
  • cover 特殊值， 将背景图片智能改变尺寸以撑满盒子。 
/* 设置一个值， 此时代表的是背景图片的宽度，高度默认auto*/ background-size: 50%; background-size: 3.2em; background-size: 12px; background-size: auto; /* 第一个值设置宽度，第二个值设置高度 */ background-size: 50% auto; background-size: 3em 25%; background-size: auto 6px; background-size: auto auto;

示例

CSS基础-背景 

<!DOCTYPE html>
<html lang=\"en\">
  <head>
    <meta charset=\"UTF-8\" />
    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />
    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />
    <title>背景大小设置</title>
    <style> /* background-size 使用 auth */ .box1 { width: 500px; height: 300px; border: 1px solid #000; background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.2fb5b20787d386d13c553acd9195367b?rik=SVaO4tCMUb4Wrw&riu=http%3a%2f%2fpic.616pic.com%2fys_img%2f00%2f18%2f72%2fVSjXnSgVHI.jpg&ehk=IeIi2DES5PyvRSxSW1k74c0befZUHhZdHWklbVTPQXM%3d&risl=&pid=ImgRaw&r=0); background-size: 300px auto; margin-bottom: 10px;
      } /* background-size 使用百分比 */ .box2 { width: 500px; height: 300px; border: 1px solid #000; background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.2fb5b20787d386d13c553acd9195367b?rik=SVaO4tCMUb4Wrw&riu=http%3a%2f%2fpic.616pic.com%2fys_img%2f00%2f18%2f72%2fVSjXnSgVHI.jpg&ehk=IeIi2DES5PyvRSxSW1k74c0befZUHhZdHWklbVTPQXM%3d&risl=&pid=ImgRaw&r=0); background-size: 50% 50%; margin-bottom: 10px;
      } /* background-size 使用 contain 智能背景图片尺寸，以容纳到盒子里 */ .box3 { width: 400px; height: 300px; border: 1px solid #000; background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.2fb5b20787d386d13c553acd9195367b?rik=SVaO4tCMUb4Wrw&riu=http%3a%2f%2fpic.616pic.com%2fys_img%2f00%2f18%2f72%2fVSjXnSgVHI.jpg&ehk=IeIi2DES5PyvRSxSW1k74c0befZUHhZdHWklbVTPQXM%3d&risl=&pid=ImgRaw&r=0); background-size: contain; background-repeat: no-repeat; margin-bottom: 10px;
      } /* background-size 使用 cover 智能改变尺寸，以撑满盒子 */ .box4 { width: 400px; height: 300px; border: 1px solid #000; background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.2fb5b20787d386d13c553acd9195367b?rik=SVaO4tCMUb4Wrw&riu=http%3a%2f%2fpic.616pic.com%2fys_img%2f00%2f18%2f72%2fVSjXnSgVHI.jpg&ehk=IeIi2DES5PyvRSxSW1k74c0befZUHhZdHWklbVTPQXM%3d&risl=&pid=ImgRaw&r=0); background-size: cover; margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <div class=\"box1\"></div>
    <div class=\"box2\"></div>
    <div class=\"box3\"></div>
    <div class=\"box4\"></div>
  </body>
</html>

background-clip 背景绘制区域

指定背景的绘制区域。

默认情况下，背景被绘制到元素的边框外沿，但是可以通过background-clip属性来控制背景的绘制区域。

语法 

background-clip: border-box | padding-box | content-box;
  • border-box: 背景延伸至边框外沿（但是在边框下层）， 默认值。
  • padding-box: 背景延伸至内边距（[padding](https://developer.mozilla.org/zh-CN/docs/Web/CSS/padding)）外沿。不会绘制到边框处。
  • content-box: 背景被裁剪至内容区（content box）外沿。

示例

三种取值的演示 

<!DOCTYPE html>
<html lang=\"en\">
<head>
    <meta charset=\"UTF-8\">
    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">
    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
    <title>控制背景的控制区域</title>
    <style> /* 裁剪到内容区域 */ .box1 { width: 400px; height: 300px; padding: 50px; border: 10px dotted red; background-color: yellow; background-clip: content-box; margin-bottom: 10px;
        } /* 裁剪至边框区域（包含border） */ .box2 { width: 400px; height: 300px; padding: 50px; border: 10px dotted red; background-color: yellow; background-clip: border-box; margin-bottom: 10px;
        } /* 裁剪至pading区域（包含padding） */ .box3 { width: 400px; height: 300px; padding: 50px; border: 10px dotted red; background-color: yellow; background-clip: padding-box;
        }

        
    </style>
</head>
<body>
    <div class=\"box1\">div1</div>
    <div class=\"box2\">div2</div>
    <div class=\"box3\">div3</div>
</body>
</html>

background-origin 背景图片定位区域

指定背景图片的定位区域。

默认情况下，背景图片的定位区域是元素的 padding box。但是可以使用background-origin属性来控制背景图片的定位区域。

语法 

background-origin: border-box | padding-box | content-box;
  • border-box：背景图片的摆放以 border 区域为参考， 以边框的左上角外沿为基准。
  • padding-box：背景图片的摆放以 padding 区域为参考， 以padding的左上角外沿为基准。
  • content-box：背景图片的摆放以 padding 区域为参考，以 padding内真正的内容的外沿为基准。

示例

CSS基础-背景 

<!DOCTYPE html>
<html lang=\"en\">
  <head>
    <meta charset=\"UTF-8\" />
    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />
    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />
    <title>background-origin 定位起始位置</title>
    <style> /*  背景图片/颜色 从 边框开始（包含边框） */ .box1 { height: 400px; width: 300px; background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.2fb5b20787d386d13c553acd9195367b?rik=SVaO4tCMUb4Wrw&riu=http%3a%2f%2fpic.616pic.com%2fys_img%2f00%2f18%2f72%2fVSjXnSgVHI.jpg&ehk=IeIi2DES5PyvRSxSW1k74c0befZUHhZdHWklbVTPQXM%3d&risl=&pid=ImgRaw&r=0); background-origin: border-box; background-repeat: no-repeat; border: 10px dotted red;
      } /*  背景图片/颜色 从 内容开始 (包含内容) */ .box2 { height: 400px; width: 300px; padding: 30px; background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.2fb5b20787d386d13c553acd9195367b?rik=SVaO4tCMUb4Wrw&riu=http%3a%2f%2fpic.616pic.com%2fys_img%2f00%2f18%2f72%2fVSjXnSgVHI.jpg&ehk=IeIi2DES5PyvRSxSW1k74c0befZUHhZdHWklbVTPQXM%3d&risl=&pid=ImgRaw&r=0); border: 10px dotted red; background-origin: content-box; background-repeat: no-repeat;
      } /* 默认 background-origin 是 padding-box 
           background-origin 从 padding 开始（包含padding区域）
        */ .box3 { height: 400px; width: 300px; padding: 30px; border: 10px dotted red; background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.2fb5b20787d386d13c553acd9195367b?rik=SVaO4tCMUb4Wrw&riu=http%3a%2f%2fpic.616pic.com%2fys_img%2f00%2f18%2f72%2fVSjXnSgVHI.jpg&ehk=IeIi2DES5PyvRSxSW1k74c0befZUHhZdHWklbVTPQXM%3d&risl=&pid=ImgRaw&r=0); background-repeat: no-repeat; /* background-origin: padding-box; */ background-clip: padding-box;
      }
    </style>
  </head>
  <body>
    <div class=\"box1\"></div>
    <div class=\"box2\">qqqqd</div>
    <div class=\"box3\"></div>
  </body>
</html>

background-attachment

background-attachment 决定了背景图像的位置是在视口内固定，或者包含它的区块滚动。

值 意义
fixed 背景图像固定在视口中，不随页面滚动而滚动。
local 背景图像会随着元素内容的滚动而滚动，而不是随页面滚动而滚动。
scroll 背景图像会随着页面的滚动而滚动(默认)。 
<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\" /> <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" /> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /> <title>背景定位演示</title> <style> body { height: 3000px;
      } .box1 { position: relative; top: 100px; width: 200px; height: 200px; border: 1px solid #000; /* 纵向溢出的内容，用滚动条显示 */ overflow-y: scroll; background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.2fb5b20787d386d13c553acd9195367b?rik=SVaO4tCMUb4Wrw&riu=http%3a%2f%2fpic.616pic.com%2fys_img%2f00%2f18%2f72%2fVSjXnSgVHI.jpg&ehk=IeIi2DES5PyvRSxSW1k74c0befZUHhZdHWklbVTPQXM%3d&risl=&pid=ImgRaw&r=0); background-attachment: scroll;
      } </style> </head> <body> <div class=\"box1\"> <p>内容1</p> <p>内容1</p> <p>内容1</p> <p>内容1</p> <p>内容1</p> <p>内容1</p> <p>内容1</p> <p>内容1</p> <p>内容1</p> <p>内容1</p> <p>内容1</p> </div> </body> </html>

background-position 图片其实位置

精确设置图像的初始位置。属性值可以使用 px 像素描述，也可以用 top、bottom、center、left、right描述图片的位置。 

/**水平方向 在上， 垂直方向 默认为 center*/ background-position: top; /**水平方向 在左， 垂直方向再上 （左上角）*/ background-position: left top; /**定义了 水平位置 25% 垂直位置25%。 左上角 定义为 0%， 右下角定义为 100% 100%*/ background-position: 25% 75%; /**水平位置 10像素 垂直为 10像素 。 左上角定义为 0px 0px*/ background-position: 10px 10px;

示例 

<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\" /> <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" /> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /> <title>背景图片定位位置</title> <style> .box1 { width: 200px; height: 200px; border: 1px solid black; background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.2fb5b20787d386d13c553acd9195367b?rik=SVaO4tCMUb4Wrw&riu=http%3a%2f%2fpic.616pic.com%2fys_img%2f00%2f18%2f72%2fVSjXnSgVHI.jpg&ehk=IeIi2DES5PyvRSxSW1k74c0befZUHhZdHWklbVTPQXM%3d&risl=&pid=ImgRaw&r=0); background-size: 50% auto; background-repeat: no-repeat; background-position: 0px 0px;
      } .box2 { width: 200px; height: 200px; border: 1px solid black; background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.2fb5b20787d386d13c553acd9195367b?rik=SVaO4tCMUb4Wrw&riu=http%3a%2f%2fpic.616pic.com%2fys_img%2f00%2f18%2f72%2fVSjXnSgVHI.jpg&ehk=IeIi2DES5PyvRSxSW1k74c0befZUHhZdHWklbVTPQXM%3d&risl=&pid=ImgRaw&r=0); background-size: 50% auto; background-repeat: no-repeat; background-position: top right;
      } </style> </head> <body> <div class=\"box1\"></div> <div class=\"box2\"></div> </body> </html>

精灵图技术

将多个小图标放在一个图片上，并使用 background-position 技术只显示其中一个。

优点： 减少http请求次数

缺点： 不方便测量，后期改动麻烦

示例

展示精灵图

  1. 网络中搜索随便搜索一张CSS精灵图https://img-blog.csdnimg.cn/20201101235915402.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xJVUNIVUFOUUkxMjM0NQ==,size_16,color_FFFFFF,t_70#pic_center

  2. 使用 PS 测量图标在图片当中的位置

    ps中选择切片工具， 选择需要测量的图片后双击，弹出层终的 x、y表示其在图片中的横纵坐标位置。 w、h分别表示图片的宽度和高度

    CSS基础-背景

  3. 编写代码

    指定 background-position: – 376px 0px; （以盒子左上角为原点， 相当于把 图片往左拉动 376 像素，往上拉动 0px ） 

    <!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\" /> <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" /> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /> <title>css精灵图演示</title> <style> .dui { position: absolute; top: 100px; left: 100px; width: 37px; height: 42px; border: 1px solid #000; background-image: url(images/jinglingtu.jpeg); background-position: -376px 0px;
      } </style> </head> <body> <i class=\"dui\"></i> </body> </html>

background 合写属性

可以使用background属性来同时设置背景颜色、背景图片、背景位置、背景大小等属性。

语法 

selector { background: color url(image.jpg) no-repeat center center / cover;
}

示例

例如将背景颜色设置为黄色，背景图片为 01.jpg ，不重复，居中对齐 。 

background: yellow url(image/01.jpg) no-repeat center center 
            背景颜色   背景图片           背景重复  背景位置
收藏 (0) 打赏

感谢您的支持，我会继续努力的!

打开微信/支付宝扫一扫，即可进行扫码打赏哦，分享从这里开始，精彩与您同在
点赞 (0)

申明：本文由第三方发布，内容仅代表作者观点，与本网站无关。对本文以及其中全部或者部分内容的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。本网发布或转载文章出于传递更多信息之目的，并不意味着赞同其观点或证实其描述，也不代表本网对其真实性负责。

左子网 编程相关 CSS基础-背景 https://www.zuozi.net/36306.html

python实现数组平移K位问题
上一篇： python实现数组平移K位问题
盘点C#中感叹号"!"的作用
下一篇： 盘点C#中感叹号"!"的作用
常见问题

发货方式是什么？

  • 1、自动：拍下后，点击（下载）链接即可下载；2、手动：拍下后，联系卖家发放即可或者联系官方找开发者发货。
查看详情

交易周期是多久呢？

  • 1、源码默认交易周期：手动发货商品为1-3天，并且用户付款金额将会进入平台担保直到交易完成或者3-7天即可发放，如遇纠纷无限期延长收款金额直至纠纷解决或者退款！；
查看详情

能退款么？

  • 1、描述：源码描述(含标题)与实际源码不一致的（例：货不对板）； 2、演示：有演示站时，与实际源码小于95%一致的（但描述中有”不保证完全一样、有变化的可能性”类似显著声明的除外）； 3、发货：不发货可无理由退款； 4、安装：免费提供安装服务的源码但卖家不履行的； 5、收费：价格虚标，额外收取其他费用的（但描述中有显著声明或双方交易前有商定的除外）； 6、其他：如质量方面的硬性常规问题BUG等。 注：经核实符合上述任一，均支持退款，但卖家予以积极解决问题则除外。
查看详情

注意事项

  • 1、左子会对双方交易的过程及交易商品的快照进行永久存档，以确保交易的真实、有效、安全！ 2、左子无法对如“永久包更新”、“永久技术支持”等类似交易之后的商家承诺做担保，请买家自行鉴别； 3、在源码同时有网站演示与图片演示，且站演与图演不一致时，默认按图演作为纠纷评判依据（特别声明或有商定除外）； 4、在没有”无任何正当退款依据”的前提下，商品写有”一旦售出，概不支持退款”等类似的声明，视为无效声明； 5、在未拍下前，双方在QQ上所商定的交易内容，亦可成为纠纷评判依据（商定与描述冲突时，商定为准）； 6、因聊天记录可作为纠纷评判依据，故双方联系时，只与对方在左子上所留的QQ、手机号沟通，以防对方不承认自我承诺。 7、虽然交易产生纠纷的几率很小，但一定要保留如聊天记录、手机短信等这样的重要信息，以防产生纠纷时便于左子介入快速处理。
查看详情

相关文章

猜你喜欢
发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务

联系官方团队 在线提交工单
TA的动态
左子网

分享最新WordPress教程共同学习，共同进步，共同成长！

QQ交流群
左子网

QQ交流群

您的支持，是我们最大的动力！ https://qm.qq.com/q/iR7Nj0TrOg
热门文章
热门标签
随机推荐
热门评论
终身VIP会员限时钜惠
首页 源码 菜单 案例 我的