文字和按钮全宽图像

我有一个页面，其中我有多个全角<img>的 - 我必须添加一个<button>和<h2>叠加在每个图像上。图像将具有可变高度，因此内部元素需要符合其宽度+高度设置的边界。文字和按钮全宽图像

的图像因而风格：

CSS

.FullWidthImg { 
    width: 100vw; 
    position: relative; 
    left: 50%; 
    right: 50%; 
    margin-left: -50vw; 
    margin-right: -50vw; 
}

HTML

<div id="container"> <!--ONLY STYLING FOR container IS position: relative--> 
    <img src="xx" alt="xx" style="FullWidthImg"/> 
    <h2>TEXT GOES HERE</h2> 
    <button>i'm a button</button> 
</div>

大多数方法建议的造型<h2>和<button>与position: absolute - 这工作，如果你有一个图像元素和图像总是有相同的高度，但是对我来说也不是这样。

另一种方法我已经看到了正在是这样的：

<div style="background-image: url(/img.com)"> 
    <h2>TEXT GOES HERE</h2> 
    <button>i'm a button</button> 
</div>

...然后定位中，元素可能工作，但我想，以避免线造型如果可能的话。

是否有任何替代方法可用于此用例？

来源

2017-08-31 SamYoungNY

我不认为你提出哈克任何一个解决方案。关于第一个解决方案 - “这适用于如果你有一个图像元素和图像总是具有相同高度” - 所有你需要的是将每组img，h2和按钮包装在不同的div中。 –

为什么第二个选项必须是内联样式？只需添加一个唯一的ID或类，并将样式移动到您的CSS文件。 –

@William_Wilson除非有什么我不知道，你需要内联样式，因为每个'背景图像'必须有所不同。如果您使用课程，则只能有一个图像。如果您使用ID - 您必须为每个图像创建一个单独的ID。你仍然可以使用class/id，但需要使用'style'内联来更改'background-image'。 – SamYoungNY

建立你的第一个建议，这里是你如何能够完成你想要的布局没有内联样式。

.img-wrapper { 
 
    position: relative; 
 
} 
 

 
.img-wrapper img { 
 
    width: 100%; 
 
} 
 

 
.img-wrapper .overlay { 
 
    position: absolute; 
 
    top: 0; left: 0; right: 0; bottom: 0; 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    justify-content: center; 
 
    text-align: center; 
 
} 
 

 
.img-wrapper h2 { 
 
    margin: 0 0 .5em; 
 
}

<div class="img-wrapper"> 
 
    <img src="http://via.placeholder.com/600x150/eee/ddd" /> 
 
    <div class="overlay"> 
 
    <h2>Heading</h2> 
 
    <button>Button</button> 
 
    </div> 
 
</div> 
 

 
<div class="img-wrapper"> 
 
    <img src="http://via.placeholder.com/600x400/eee/ddd" /> 
 
    <div class="overlay"> 
 
    <h2>Heading</h2> 
 
    <button>Button</button> 
 
    </div> 
 
</div>

来源

2017-08-31 16:37:03

谢谢，我现在正在尝试这种方法 – SamYoungNY

文字和按钮全宽图像

回答

相关问题