问在响应式网页设计中，在背景中的特定点上显示div
EN

Stack Overflow用户

提问于 2017-10-05 18:40:44

回答 1查看 51关注 0票数 1

我正在做一个回应网站，并想显示一个div在背景中的一个特定点。但是当我调整浏览器的大小时，div就会移动到一个随机位置。https://jsfiddle.net/gmr2583u/ (无法将背景图像附加在小提琴中)背景图像：带灰色邮票的蓝色背景。这是密码。

<!DOCTYPE HTML>
<html>
<head>
    <link href="jsfiddle.css" rel="stylesheet" type="text/css" />
    <style>
        body{margin:0 auto;padding:0;font: 0.8em Arial,sans-serif;}
       .jsfiddle {
          float:left;
          display:block;
          background-image: url(Images/jsfiddle.jpg); 
          width:45%; 
          height:240px; 
          z-index:1; }
         .con1{
           float:right;
           padding:6% 2% 0 0;}
         .con1 a{
           text-decoration:none;
           font-weight:bold;
           color:#1f5198; 
           padding-top:1%;}
    </style>
</head>

<body>
    <div class="jsfiddle">
        <div class="con1"><a href="#">Click here for <br> information on 
          <br> CEO<br> Conference <br> October 9-10 </a>
        </div>
    </div>                    
</body>
</html>

css

responsive-design

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-10-05 19:12:57

您需要在position:absolute上使用.con1，然后将元素转换为减去.con1位置百分比，以计算元素的宽度和高度。您还需要将position:relative;应用于.jsfiddle，以便.con1相对于该元素具有正标题。

body{
  margin:0 auto;
  padding:0;
  font: 0.8em Arial,sans-serif;
 }

.jsfiddle {
  position:relative;
  float:left;
  display:block;
  background-size:cover;
  background-position:center center;
  background-image: url(http://www.placecage.com/c/460/300); 
  width:45%; 
  height:240px; 
  z-index:1; 
}
.con1 {
  position:absolute;
  right:6%;
  top:10%;
  transform:translate(-10%, -2%);
  background:#fff;
}
.con1 a{
  text-decoration:none;
  font-weight:bold;
  color:#1f5198; 
  padding-top:1%;
}

<div class="jsfiddle">
  <div class="con1"><a href="#">Click here for <br> information on <br> CEO<br> Conference <br> October 9-10 </a>
  </div>
</div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/46592667

复制

相似问题

问在响应式网页设计中，在背景中的特定点上显示div
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在响应式网页设计中，在背景中的特定点上显示divEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在响应式网页设计中，在背景中的特定点上显示div
EN