Question

我想获得您可以看到的相同输出，例如genius.com。

有：

（1）大图

（2）该图像上的小方块

（3）文本（链接）加上（1）和（2）
上的一些小图像

我想要做的事情的不同之处在于（1）图像是由用户上传的，而不是作为静态内容发布（例如发布为背景图片，如genius.com）。

<div class="wrapper">
  <img alt="" class="bg-img" src="http://xyz3etr4qqrrx.cloudfront.net/uploads/picture/image/2/image.png" />
  <div class="text-plus-links">Text...</div>
</div>

css（尝试）

.bg-img{width:300px; height:250px;}
.text-plus-links{display:table; margin-top:-250px;...}

/* small image that adds the squares */
opacity: 0.2;
background: asset-url("http://genius.com/images/tooth_bg.png") repeat scroll 0% 0% transparent;

Answer 1

首先，如果图片将由用户上传，这意味着您将需要服务器端脚本并可能存储图像。您无法在客户端存储数据，因为代码会在每个页面加载时更新（例外浏览器cookie）。

<强>解决方法1

这是您正在寻找的静态解决方案。

https://jsfiddle.net/jd6c7fdj/2/

只需将背景颜色更改为背景图像并设置透明度

即可

但是，由于图像将由用户加载，因此您必须检测图像属性并相应地设置所有内容

解决方案2

更优雅的解决方案是保持静态宽度和高度的div并将图像设置为背景图像

这样做的缺点是图像的大小会受到很大限制，但它会为你节省大量的代码

再次这更优雅

https://jsfiddle.net/e1pktges/1/

<div class="whatever">
   <div class="cover">
      <p> Hello </p>
      <p> yess </p>
    </div>
</div>


 .cover{
   background-color: rgba(0,0,0,0.7);
    z-index: 500;
   position: absolute;
   width: 700px;
   height: 500px;
 }

p{
  color: white;
}

.whatever{
  background-image: url("http://www.lucamartincigh.com/wp-      content/uploads/2010/11/fullscreen-website-template.png");
  width: 700px;
  height: 500px;
} 
}

两个图像和文字重叠

1 个答案: