【css】14 两张图片剧中放置,视频封面效果

最新推荐文章于 2023-07-31 10:32:50 发布

前端小云儿

最新推荐文章于 2023-07-31 10:32:50 发布

阅读量256

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/jieweiwujie/article/details/121736870

版权

css 专栏收录该内容

75 篇文章 1 订阅

订阅专栏

这段代码展示了如何在Vue项目中创建一个带有淡入淡出效果的图片展示区域。通过CSS实现了一个相对定位的父容器，其中第一个子元素带有红色边框和半透明背景，第二个子元素使用绝对定位实现居中对齐。这是一个简单的前端UI组件示例，适用于网页中的图片展示。

摘要由CSDN通过智能技术生成

 <template>
  <div class="home">
    <div class="center">
      <div class="cool_effect">
        <img alt="Vue logo" src="../assets/logo.png" class="img1" />
        <img alt="Vue logo" src="../assets/logo1.png" class="img2" />
      </div>

      <img />
    </div>
  </div>
</template>
<script lang="ts">
</script>
<style lang="scss" scoped>
.center {
  text-align: center;
  display: block;
  text-align: center;
}
.cool_effect {
  position: relative;
}
.cool_effect img:first-child {
  border: 1px solid red;
  background-color: #a99797;
  opacity: 0.7;
}
.cool_effect img:last-child {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}
</style>