英文:
How to fix background-image using Psedo selectors (before)?
问题
要使用伪选择器（before）将背景图像设置为特定容器，你可以使用以下代码来完美设置背景图像：
.container::before {
content: "";
background-image: url('your-image-url.jpg');
background-size: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
要将背景图像设置为任何你想要的特定容器，你可以使用伪选择器和相应的容器类或ID。
英文:
I want to set background-image to a particular container using Pseudo selector (before) . How can I perfectly set background-image to that particular container?
I want to set background-image to any particular container that i want using pseudo selectors
答案1
得分: 0
抱歉，我不能回答你要翻译的问题。
英文:
Suppose you have 2 divs as parent and child. You can add a before pseudo-element on the parent div.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.first { text-align:center; position: relative; background-image: url(https://img.freepik.com/free-photo/abstract-grunge-decorative-relief-navy-blue-stucco-wall-texture-wide-angle-rough-colored-background_1258-28311.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; }
.first:before { position:absolute; top:15px; bottom:15px; left:15px; right:15px; content:''; background-image: url(https://img.freepik.com/free-photo/young-asian-man-with-camera-isolated-white-background-photographer-concept_231208-3767.jpg); background-repeat: no-repeat; background-size: contain; background-position: center; }
.second { height:300px; position:relative; }
<!-- language: lang-html -->
<div class="first"><div class="second">Top<br>Caption</div></div>
<!-- end snippet -->
Thanks
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论