Html 如何使用css在响应图像后面添加形状

发布于09月29日

我怎么才能做出这样一个(picture link here)的投影呢？我try 过使用伪元素，但这并不适用于我所有的代码.我还没有完成所有的事情，但这个问题真的困扰着我.

 <div class="header">
        <div class="flexcontainer">
            <img id="image" src="CV-PP-2.jpg" alt="">
        <h1>Samira Hadid</h1>
        </div>
        <h3>Full-Stack Web Developer</h3>
      </div>

.flexcontainer{
    display: flex;
    justify-content: space-evenly;
    flex-direction: row-reverse;
    align-items:center;
    flex-wrap: wrap;
}
 #image {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    position: relative;
    
}

我还需要它来跟随图片，因为它需要响应.

推荐答案

实现这一点的最简单方法是使用伪元素:

body {
  display: grid;
  place-items: center;
  margin: 0;
  min-height: 100dvh;
  overflow: hidden;
}

.img {
  position:relative;
}

.img:before {
  content: '';
  position: absolute;
  inset: -100vmax 0 50%;
  background: chocolate;
  z-index: -1;
}

img {
  display: block;
  max-width: 100%;
  border-radius: 50%;
  margin: 20px 0;
}

<div class="img">
  <img src="https://picsum.photos/150/150" alt="">
</div>

Html相关问答推荐

如何才能完成这个背景按钮

关于角内按钮范围的混乱

在Apps Script中连接CSS与HTML

Html 如何使用css在响应图像后面添加形状

推荐答案

Html相关问答推荐

如何才能完成这个背景按钮

关于角内按钮范围的混乱

在Apps Script中连接CSS与HTML

<；img>；和具有负边距的元素的堆叠顺序

损坏的可点击html邮箱签名

在Chrome中使用手写笔时，滚动条方向反转

调整一组IMG的大小以适应容器DIV

一切停止工作后，添加不透明度(在tailwind )

错误时交换表单，成功时使用HTMX重定向

如何防止滑动滚动元素时touch 屏出现空白区域？

Tailwind CSS 忽略我的元素的填充

：after 伪元素没有出现，即使它有 content 属性

复制两个
会产生一个空行；复制
元素不会

元素不会

即使必填字段为空，HTML 表单也已成功提交

水平填充容器内的空间

Flex布局中，当父元素高度较高时，交叉轴上出现额外的空白问题.

为什么图像会影响我的
大小？

使用 golem 框架在shiny 的应用程序中存储背景图片的位置

AWS SES：如何正确使用 CSS

动态使用时波浪号不转换为绝对路径