html如何背景图片拉伸

Posted 2023-03-28

我的那图片是单元格背景，怎么拉伸，原始状态时平铺的

取值：repeat、no-repeat 、repeat-x、repeat-y 。

repeat : 默认值。背景图像在纵向和横向上平铺；

no-repeat : 背景图像不平铺；

repeat-x : 背景图像仅在横向上平铺；

repeat-y : 背景图像仅在纵向上平铺。

html是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容。

浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。

但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。

HTML之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点--就是一种URL指针，通过激活它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。

一个网页对应于一个HTML文件，HTML文件以.htm或.html为扩展名。可以使用任何能够生成TXT类型源文件的文本编辑来产生HTML文件。 标准的HTML文件都具有一个基本的整体结构，即HTML文件的开头与结尾标志和HTML的头部与实体2大部分。有3个双标记符用于页面整体结构的确认。

标记符说明该文件是用HTML来描述的。它是文件的开头，而则表示该文件的结尾，它们是HTML文件的始标记和尾标记。

参考技术A background-size: cover; 参考技术B background-repeat:round;就ok啦 参考技术C background:url() margintop marginleft repeat;
其中repeat 是设置图片的排列形式的 repeat-x:横向平铺；repeat-y:纵向平铺; no-repeat:不平铺

所以说背景图片不是不能拉伸的追问

那还有其他方法能把图片整个刚在单元格里吗

追答

你可以用标签
设置position:absolute
上面显示的文字等 可以设置边距放到上面，只能这样了

关于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;这样就会竖着延伸了