Question

我会尽力更好地揭露问题。我会以敏感的方式做到这一点：
但我有这个问题：＆＃34;绳索＆＃34;保持图片，当我放大（或减少）图片时，它会失去垂直位置：

这是我的代码：

.activity-dipinto{
    width: 100%;
    box-shadow: 0 0 0 2px #AB6712, 0 0 0 3px #D8B611, 0 0 0 9px #794B11, 0 0 0 12px #DCA406, 0 0 0 16px #5D390C, 0 0 0 18px #92660D, 0 2px 6px 18px rgb(0, 0, 0);
    position: relative;

    z-index: 10;
}

.activity-dipinto img{
    width:100%;
    display:inherit;
    margin-top: -2px;
}

.activity-dipinto-wrap{
    margin: 100px;
    width:20%;
}

.activity-dipinto-wrap .filo-1{
    height: 1px;
    width: 52%;
    background: #A2A2A2;
    position: relative;
    top: -40px;
    transform: rotate(-9deg);
    left: -10px;
    z-index: 1;
}

.activity-dipinto-wrap .filo-1:after{
    content: "";
    background: #E1E7E8;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    position: absolute;
    top: -11px;
    left: 100%;
    top: -3px;
    z-index: 15;
    box-shadow: inset 0px 0px 4px 4px rgba(0, 0, 0, 0.58);
}

.activity-dipinto-wrap .filo-2{
    height: 1px;
    width: 52%;
    background: #A2A2A2;
    position: relative;
    top: -41px;
    transform: rotate(9deg);
    left: 51%;
    z-index: 0;
}

<div class="activity-dipinto-wrap">
    <div class="fili">
        <div class="filo-1"></div>
        <div class="filo-2"></div>
    </div>
    <div class="activity-dipinto">
        <img src="http://spotal.net/magazine/wp-content/uploads/2015/02/Picnic-in-the-Mountains.jpg" />
    </div>
</div>

https://jsfiddle.net/kLs4kmyq/
如何相对于下图显示2根绳索的位置？

Answer 1

您也可以只使用伪渐变和背景渐变：

垂直边距和填充用于设置比率：

      百分比是根据生成的包含块的宽度计算的，即使对于“填充顶部”也是如此。并且＆＃39; padding-bottom＆＃39;。如果包含块的宽度取决于此元素，则在CSS 2.1中未定义结果布局。

与margin属性不同，填充值的值不能为负数。与边距属性一样，填充属性的百分比值指的是生成的包含块的宽度。

https://www.w3.org/TR/CSS2/box.html#padding-properties

＆＃13;

.wframe {
  box-shadow: 0 0 0 2px #AB6712, 0 0 0 3px #D8B611, 0 0 0 9px #794B11, 0 0 0 12px #DCA406, 0 0 0 16px #5D390C, 0 0 0 18px #92660D, 0 2px 6px 18px rgb(0, 0, 0);
  position: relative;
  width: 20%;
  min-width: 150px;
  margin: 100px 2em 2em;
  display: inline-block;
}
img {
  display: block;
  width: 100%;
}
.wframe:before {
  content: '';
  z-index: -1;
  position: absolute;
  width: 100%;
  padding-top: 20%;
  margin-top: -20%;
  background: linear-gradient(to bottom right, transparent 49.5%, gray 49.5%, gray 50.5%, transparent 50.5%) top left no-repeat, linear-gradient(to bottom left, transparent 49.5%, gray 49.5%, gray 50.5%, transparent 50.5%) top right no-repeat;
  background-size: 50% 80%;
}
.wframe:after {/* however you want to draw your pin here */
  content: 'x';
  position: absolute;
  bottom: 100%;
  margin-bottom: 18%;
  left: 50%;
  margin-left: -0.35em;
  line-height: 0;
  padding: 0.5em 0.25em 0.55em;
  color: gray;
  background: #333;
  box-shadow: 0 0 3px;
  border-radius: 50%;
}

＆＃13;

<div class="wframe">
  <img src="http://spotal.net/magazine/wp-content/uploads/2015/02/Picnic-in-the-Mountains.jpg" />
</div>
<div class="wframe">
  <img src="http://spotal.net/magazine/wp-content/uploads/2015/02/Picnic-in-the-Mountains.jpg" />
</div>
<div class="wframe">
  <img src="http://spotal.net/magazine/wp-content/uploads/2015/02/Picnic-in-the-Mountains.jpg" />
</div>

＆＃13;

codepen to play with

＆＃13;

.wframe {
  box-shadow: 0 0 0 2px #AB6712, 0 0 0 3px #D8B611, 0 0 0 9px #794B11, 0 0 0 12px #DCA406, 0 0 0 16px #5D390C, 0 0 0 18px #92660D, 0 2px 6px 18px rgb(0, 0, 0);
  position: relative;
  min-width: 150px;
  margin: 20% 2em 2em;
}
img {
  display: block;
  width: 100%;
}
.wframe:before {
  content: '';
  z-index: -1;
  position: absolute;
  width: 100%;
  padding-top: 20%;
  margin-top: -17%;
  background: linear-gradient(to bottom right, transparent 49.5%, gray 49.5%, gray 50.5%, transparent 50.5%) top left no-repeat, linear-gradient(to bottom left, transparent 49.5%, gray 49.5%, gray 50.5%, transparent 50.5%) top right no-repeat;
  background-size: 50% 80%;
}
.wframe:after {/* however you want to draw your pin here */
  content: 'x';
  position: absolute;
  bottom: 100%;
  margin-bottom: 16%;
  left: 50%;
  margin-left: -0.35em;
  line-height: 0;
  padding: 0.5em 0.25em 0.55em;
  color: gray;
  background: #333;
  box-shadow: 0 0 3px;
  border-radius: 50%;
}

＆＃13;

<div class="wframe">
  <img src="http://spotal.net/magazine/wp-content/uploads/2015/02/Picnic-in-the-Mountains.jpg" />
</div>
<div class="wframe">
  <img src="http://spotal.net/magazine/wp-content/uploads/2015/02/Picnic-in-the-Mountains.jpg" />
</div>
<div class="wframe">
  <img src="http://spotal.net/magazine/wp-content/uploads/2015/02/Picnic-in-the-Mountains.jpg" />
</div>

＆＃13;

another codepen to play with

Answer 2

如果您不喜欢伪元素，请尝试使用：

.fili {
  display: block;
  height: 21px;
  width: 100%;
  margin: 0 auto;
  max-width: 310px;
  float: none;
}
.activity-dipinto-wrap .filo-1 {
  height: 1px;
  width: 52%;
  background: #A2A2A2;
  position: relative;
  top: 15px;
  transform: rotate(-9deg);
  left: -10px;
  z-index: 1;
}
.activity-dipinto-wrap .filo-2 {
  height: 1px;
  width: 52%;
  background: #A2A2A2;
  position: relative;
  top: 14px;
  transform: rotate(9deg);
  left: 51%;
  z-index: 0;
}
.activity-dipinto {
  width: 100%;
  box-shadow: 0 0 0 2px #AB6712, 0 0 0 3px #D8B611, 0 0 0 9px #794B11, 0 0 0 12px #DCA406, 0 0 0 16px #5D390C, 0 0 0 18px #92660D, 0 2px 6px 18px rgb(0, 0, 0);
  position: relative;
  z-index: 10;
  margin: 18px 0;
}

此处fiddle

相对于父容器宽度的top参数

2 个答案: