首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >如何正确地使这个背景蓝色?

如何正确地使这个背景蓝色?
EN

Stack Overflow用户
提问于 2022-09-29 12:37:42
回答 2查看 39关注 0票数 0

早上好,我需要复制这个形状,但我不知道如何正确地再现蓝色背景。你知不知道?这个绝对位置不适合我,因为它是一个反应灵敏的图像。对于图像,我使用了旋转属性:

代码语言:javascript
代码运行次数:0
运行
复制
  .content {
  display: flex;
  .image {
    flex: 0 0 50%;
    img {
      transform: rotate(85deg);
    }
    @include media-screen-lg {
      padding-left: 24px;
      padding-right: 0;
    }
  }
代码语言:javascript
代码运行次数:0
运行
复制
<div class="content">
  <div class="text"></div>
  <div class="image">
    <img src={{content.field_image}}>
  </div>
</div>

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-09-29 12:49:39

对于单个子/容器,可以使用widthbackgroundrotate,例如:

代码语言:javascript
代码运行次数:0
运行
复制
.image {
  background: blue;
  width: max-content;/*shrinks to image's width */
  margin: 3em;
}

img {
  rotate: 5deg
}
代码语言:javascript
代码运行次数:0
运行
复制
<div class="image">
  <img src="https://dummyimage.com/520x550">
</div>

票数 8
EN

Stack Overflow用户

发布于 2022-09-29 12:54:12

只需使用psuedo元素,如下所示:

代码语言:javascript
代码运行次数:0
运行
复制
.image::before {
  background-color: blue;
  content: '';
  display: flex;
  inset: 0 0 0 0;
  position: absolute;
}
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/73895677

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档