Question

我为标题道歉我不知道如何用一句话来解释我想要做什么。我正在一个WordPress网站上工作，我需要制作一堆图像看起来像整形外科＆＃34;中的背景图像。本页的一部分https://rinklefreeps.wpengine.com/

我可以通过photoshop进行编辑，但我觉得如果有办法对它进行编码会更好，因为如果我需要更改任何一个，我需要做的就是放图像在，它已经看起来正确。我还需要能够在它们上面加上alt标签。

所以我想我的意思是我需要重建'＃34;整形外科＆＃34;带有背景图片的部分，我可以放置alt标签。我不太确定从哪里开始这个任何帮助都会很棒。谢谢伙计们！

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

样式图像看起来与photoshop相同

1 个答案: