gpt4 book ai didi

html - 获取背景图像以在特定点停止平铺

转载 作者:行者123 更新时间:2023-11-28 13:37:41 25 4
gpt4 key购买 nike

我正在尝试将我的 PSD 文件转换为代码,但我遇到了这些 header 的问题。 header 将包含 header 的名称,以及一个从名称末尾右侧延伸到 div 末尾的水平紫色条。我正在使用 Foundation (响应式框架)所以我给了我的标题一个三列的宽度。我写了一些代码,但我不确定如何让紫色线不出现在标题名称下。

目前,我已经将紫色线条保存为可平铺图像,并将其设置为h3标签的背景。我试过调整背景位置,但我无法从不出现在标题名称下得到该行。

这是部分 PSD 文件的屏幕截图。澄清一下,HoursPhoneLocation 旁边的紫色栏不供用户输入任何信息;它是用来分隔不同信息区域的装饰件。

enter image description here

我的代码:

<div class="row">
<div class="three columns offset-by-one contact">
<h3>Hours</h3>
</div>
</div>

.contact h3 {
color: #444;
background: url(../img/purpleLine.jpg) bottom right repeat-x;
}

最佳答案

这将是使用 HTML 元素 <span> 的最佳时机因为这几乎正是它的目的。在元素之后,添加 <span></span> ,给它你想要的宽度,并为 span 元素设置背景图像。不确定你的框架类将如何用于定义宽度,所以我只是在那个部分放了“随便”。您甚至可以为 span 元素分配一个类来定义其宽度。

HTML:

<div class="row">
<div class="three columns offset-by-one contact">
<h3>Hours</h3><span></span>
</div>
</div>

CSS:

.contact h3 {
color: #444;
}
.contact span {
width:whatever;
background: url(../img/purpleLine.jpg) bottom right repeat-x;
}

关于html - 获取背景图像以在特定点停止平铺,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12773496/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com