在没有 Photoshop 的情况下将图像样式设置为相同

Question

我为标题道歉，我不知道如何用一句话来解释我要做什么。我正在开发一个 WordPress 网站，我需要让一堆图片看起来像本页“整形外科”部分的背景图片 https://rinklefreeps.wpengine.com/

我可以使用 Photoshop 完成并编辑它们，但我觉得如果有办法将其编码出来会好很多，因为如果我需要更改其中任何一个，我需要做的就是放置图像，它看起来已经正确了。我还需要能够在它们上面放置 alt 标签。

所以我想我要说的是我需要重新创建“整形外科”部分，并使用可以放置 alt 标签的背景图像。我不太确定从哪里开始，任何帮助都会很棒。谢谢各位！

Answer 1

如果您将img 包装在一个元素中，您可以使用::before/::after 伪类使用rgba() 和使用background-color 和@987654325 定位的倾斜实心覆盖@ 创建倾斜。

* {margin:0;padding:0;box-sizing:border-box;}
.imgContainer {
  width: 50%;
  margin: auto;
  overflow: hidden;
  position: relative;
}

.imgContainer::after, .imgContainer::before {
  content: '';
  position: absolute;
}

.imgContainer::after {
  top: 0; left: 0; bottom: 0; right: 0;
  background: rgba(255,255,255,0.5);
}

.imgContainer::before {
  height: 200%;
  width: 50%;
  background: #fff;
  left: 0;
  transform: translate(-40%,-50%) rotate(15deg);
}

img {
  max-width: 100%;
}

.text {
  position: absolute;
  top: 50%; left: 50%;
  width: 80%; height: 80%;
  transform: translate(-50%,-50%);
  background: rgba(255,255,255,.3);
  z-index: 1;
  padding: .5em;
}

<div class="imgContainer">
  <img src="http://cdn.thedailybeast.com/content/dailybeast/articles/2015/03/31/neil-degrasse-tyson-defends-scientology-and-the-bush-administration-s-science-record/jcr:content/image.img.2000.jpg/1432067001553.cached.jpg" alt="alt">
  <div class="text">
    text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
  </div>
</div>