javascript - 在没有 photoshop 的情况下为图像设置样式以使其看起来相同

Question

我为标题道歉我不确定如何用一句话解释我想做的事情。我在 WordPress 网站上工作，我需要使一堆图像看起来像本页“整形外科”部分中的背景图像 https://rinklefreeps.wpengine.com/

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

所以我想我想说的是我需要重新创建“整形手术”部分，其中包含我可以放置 alt 标签的背景图像。我只是不太确定从哪里开始，任何帮助都会很棒。谢谢大家!

Answer 1

如果你将 img 包裹在一个元素中，你可以使用 ::before/::after 伪类来使用 制作一个半透明的覆盖层rgba() 和一个倾斜的实心叠加层，使用 background-color 定位和 transform: rotate() 来创建倾斜。

* {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>