Question

.container {
    border: 1px solid #DDDDDD;
    width: 200px;
    height: 200px;
    position:relative;
}
.tag {
    float: left;
    position: absolute;
    left: 0px;
    top: -10px;
    background-color: green;
}
.mytag {
    float: left;
    position: absolute;
    left: 60px;
    top: -10px;
    background-color: green;
}

<div class="container">
    <div class="tag">Featured</div>
     <div class="mytag">My list</div>
    <img src="http://www.placehold.it/200x200">
</div>

我正在尝试在图像上创建一个div，但无法创建一个响应式的div。

由于我是初学者，我正在尝试创建此网站的副本。我要创建第一部分，这应该是一个响应性的部分（计划和设计以及我们的目标应该在图像上）如何实现相同？ check here

如何使其具有响应性？

Answer 1

您提到的网站使用背景图片，这是实现该背景的示例。

首先创建包装div，然后为其应用背景图片。使它相对定位。使其他子内容框absolute定位。因此您可以在其父级中使用top，left，right和bottom CSS角色自由移动它们

html

<div class="div-with-bg-img">
  <div class="content-div">
   content here
  </div>
</div>

css

.div-with-bg-img {
  width: 350px;
  height: 150px;
  background: url(http://via.placeholder.com/350x150);
  margin-top: 100px;
  position: relative;
}

.content-div {
  width: 100px;
  height: 50px;
  background: tomato;
  position: absolute;
  top: -10px;
  left: 40px;
}

如果要使其响应，请应用相对的度量单位

.div-with-bg-img {
    width: 100%;
    height: 150px;
    background: url(http://via.placeholder.com/350x150) no-repeat;
    margin-top: 100px;
    position: relative;
    background-size: cover;
    background-position: center;
}

使用媒体查询使您的网站具有响应性

这是示例代码

@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
}

我在网络上找不到有用的文章

List of media queries

What is RWD

如果您只是想知道如何使图像具有响应性，那么这是一篇有关CSS技巧的不错的文章

https://css-tricks.com/responsive-images-css/

您可以使用浏览器开发工具来学习网站的源代码:)

如何在图像上创建响应式div？

1 个答案: