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

Posted 2023-03-05

【中文标题】在没有 Photoshop 的情况下将图像样式设置为相同

【英文标题】：Styling images to look the same with out photoshop

【发布时间】：2017-11-27 13:35:13

【问题描述】：

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

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

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

【问题讨论】：

您的意思是使用淡化img的白色覆盖层？还是左侧倾斜的白色盖子？

倾斜部分。如果我可以换出图像并且仍然具有那种倾斜而不必在 PS 中操纵图像，那将是理想的。我需要将大约 50 张图片添加到网站的其他部分，并使用完全相同的样式。

我正在处理它并做了覆盖，但可以把它拿掉。像这样？ codepen.io/anon/pen/LLjJzW

是的，完全一样！但问题是我需要图像作为一部分内容的背景，并且我需要在图像前面进行测试，但我还需要能够在图像上放置一个 alt 标记以用于 SEO 目的。

【参考方案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" >
  <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>

【讨论】：

这是个好主意！我对伪类还是有点陌生​​，所以它们通常不是我脑海中浮现的第一件事。我想我遇到的最大问题是我需要将文本放在图像前面。

@ajwerth 你没有在你的帖子中提到文字，所以我没有包括它。添加它。并且图像上有一个alt 属性。

@ajwerth 亲爱的，你打赌 :)