背景图像和元素 [英] background image and elements on it
问题描述
我需要在图片上添加一些元素:
I need to put some elements on picture:
什么是更好的方法?
-
使用img标签并将页面上的所有元素与相对/绝对定位对齐?
use img tag and align all elements on page with relative/absolute positioning ?
或使用background-image css属性?
or use background-image css property ?
我已经开始使用img标签,但现在我已经决定使用背景图像了。可悲的是,我遇到了基本问题,因为当我使用背景属性时,只有在有东西时才能看到图像。我认为这仍然是一个非常简单的问题。
I've started with img tags but now I've decided for background-image. Sadly I'm suffering with basic problems, as when I'm using background property, image is only visible when there is something on it. I believe that is very simple problem, still.
感谢您帮助我:)
SCSS
header {
margin-top: 78px;
width: 100%;
background-image:url(../img/header.png);
background-position: center;
background-repeat: no-repeat;
}
推荐答案
如果要叠加内容在您的背景图像上(它看起来像你),最好的方法是将一个背景图像添加到你的div并给它一个高度,然后在该div中添加内容。例如:
If you want to overlay content on your background image (which it looks like you do) the best approach is to add a background image to your div and give it a height and then add content inside that div. For example:
<div class="bg-image">
<div class="bg-image-module">
<p>Some Content</p>
</div>
</div>
.bg-image {
height: 500px; // change to be what you need.
background-image: url(/path/to/image.jpg)";
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
这篇关于背景图像和元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!