html 如何让背景图片充满全图，就是拉伸

Posted 2023-03-28

参考技术A

html语言背景图片拉伸代码：background-size:cover，可以使图片拉伸铺满背景。

拓展资料

背景 (background) 属性定义元素的背景效果

元素的背景区包括前景之下直到边框边界的所有空间。因此，内容框与内边距都是元素背景的一部分，且边框画在背景上。

CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果；CSS 在这方面的能力远远在 HTML 之上。

background 是用于在一个声明中设置所有背景属性的一个简写属性。

格式: background: 属性值
继承性: NO
可能的值：
background-color
background-image
background-repeat
background-attachment
background-position
新增的值：
background-clip
background-origin
background-size 
注：可以在此声明中声明1到5个背景属性。

这只是 CSS 1.0 的属性，在CSS 2.0 background已经退出了历史舞台。

例：
<style type="text/css">
body

background: #ff0000 url('i/eg_bg_03.gif') no-repeat fixed center;

</style>

关于html背景图片往下拉伸问题

左边小橙色竖条跟着右侧一起向下拉伸css 怎么写啊？？

repeat这个值是重复的意思用于background里面的

标准写法：

background-repeat: repeat-x || repeat-y || none 顾名思义这三个的意思是

    1、repeat-x：意思是说在x轴方向重复出现也就是横坐标重复填充满背景。

    2、repeat-y：这就是在y轴方向重复出现也就是纵坐标重复填充满背景。

    3、none：不重复背景。

    4、默认值不写的时候是同时重复出现在x轴和y轴

缩略写法：

    background:url() position repeat color;

背景属性：

    background-image：背景图片的路径

    background-position：背景图片的定位

    background-repeat：背景重复

    background-color：背景颜色

    background-clip：背景绘制区域

    background-origin：背景定位区域

    background-size：背景图片的尺寸

问题解答

    按上图的意思有两种解决方法

        1、可以用border（边框）来实现这一效果，代码如下：

            html
                <div class="border">
                <h1>Titel_01</h1>
                <span>test01,test02</span>
                </div>

            css
                *  margin:0; padding:0;
                h1  font-size:12px; font-weight:normal;
                .border  border-left:2px solid #ff9a2e; padding-left:8px;

        2、可以用background（背景）来实现这一效果，代码如下：

            html
                <div class="border">
                <h1>Titel_01</h1>
                <span>test01,test02</span>
                </div>

            css  
                *  margin:0; padding:0;
                h1  font-size:12px; font-weight:normal;
                .border  background:url(../images/shutiao.gif) 0 3px repeat-y;

参考技术A

给容器做背景，自适应就可以了，写法如下：

*background:url(images/XXX.png/jpg/gif) left repeat-y;

这样就可以了

参考技术B background:url(图片路径) repeat-y;这样就会竖着延伸了