CSS通栏背景的设置（解决浏览器缩放带来的影响）

最新推荐文章于 2023-01-29 17:52:01 发布

Sunshine_Jian

最新推荐文章于 2023-01-29 17:52:01 发布

阅读量669

点赞数

分类专栏： CSS 文章标签： css html 前端

本文链接：https://blog.csdn.net/sunshine_jian/article/details/124189120

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了网页背景样式的设置，包括背景颜色、背景位置、背景尺寸、背景重复、背景图像的定位区域、绘制区域和固定方式等属性。示例代码中展示了如何使用CSS实现一个带有背景图像和特定文字样式的网页布局。此外，还列举了背景相关属性的详细描述和可能的值，帮助理解并应用到实际的网页设计中。

摘要由CSDN通过智能技术生成

效果图：（边框区域为正文版心）

代码：

<!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>Document</title>
    <style>
        /* 清除默认样式 */
        *{
            margin: 0;
            padding: 0;
        }
        /* BODY背景 */
        body{
            background-color: antiquewhite;
        }
        /* 版心 */
        .ban_con{
            margin: 0 auto;
            width: 1248px;
        }
        /* TOP */
        .b1{
            margin-bottom: 20px;
            height: 1200px;
            border: 1px solid #000;
        }
        /* BOTTOM */
        .b2{
            height: 500px;
            background-image: url(../tonglanbeijing.png);
            background-position: center 0;
        }
        /* 段落 */
        .p1{
            padding-top: 300px;
            font-size: 18px;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="con ban_con">
        <div class="b1"></div>
    </div>
    <div class="b2">
        <p class="p1 ban_con">
            《致橡树》是中国诗人舒婷1977年创作的一首当代诗歌。 
            这首诗共36行,前13行诗人用攀援的凌霄花、痴情的鸟儿、泉源、险峰、日光、春雨六个形象,
            对传统的爱情观进行否定;14~36行正面抒写了自己理想的爱情观。 
            全诗通过整体象征的艺术手法,用“木棉”对“橡树”的内心独白，
            热情而坦诚地歌唱自己的人格理想
        </p>
    </div>
</body>
</html>

background相关参数：

属性	描述	值	描述
background-color	背景颜色	color_name	颜色值为颜色名称的背景颜色（比如 red）。
		hex_number	颜色值为十六进制值的背景颜色（比如 #ff0000）。
		rgb_number	颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0)）。
		transparent	默认。背景颜色为透明。
		inherit	从父元素继承。
background-position	背景图像的位置	top left top center top right center left center center center right bottom left bottom center bottom right	如果您仅规定了一个关键词，那么第二个值将是"center"。默认值：0% 0%。
		x% y%	第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值，另一个值将是 50%。
		xpos ypos	第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果您仅规定了一个值，另一个值将是50%。您可以混合使用 % 和 position 值。
background-size	背景图片的尺寸	length	设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
		percentage	以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
		cover	以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
		contain	把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
background-repeat	如何重复背景图像	repeat	默认。背景图像将在垂直方向和水平方向重复。
		repeat-x	背景图像将在水平方向重复。
		repeat-y	背景图像将在垂直方向重复。
		no-repeat	背景图像将仅显示一次。
		inherit	从父元素继承。
background-origin	背景图片的定位区域	padding-box	背景图像相对于内边距框来定位。
		border-box	背景图像相对于边框盒来定位。
		content-box	背景图像相对于内容框来定位。
background-clip	背景的绘制区域	border-box	背景被裁剪到边框盒。
		padding-box	背景被裁剪到内边距框。
		content-box	背景被裁剪到内容框。
background-attachment	背景图像是否固定或者随着页面的其余部分滚动	scroll	默认值。背景图像会随着页面其余部分的滚动而移动。
		fixed	当页面的其余部分滚动时，背景图像不会移动。
		inherit	从父元素继承。
background-image	要使用的背景图像	url('URL')	指向图像的路径。
		none	默认值。不显示背景图像。
		inherit	从父元素继承。