css-实现图片的一些处理（备注：我不是小黑子，我是真IKUN）

最新推荐文章于 2024-05-30 15:01:09 发布

九族高兴的摸不到头脑

最新推荐文章于 2024-05-30 15:01:09 发布

阅读量161

点赞数

分类专栏： css基础文章标签： css css3 html

本文链接：https://blog.csdn.net/xxcjlrc/article/details/129911820

版权

css基础专栏收录该内容

2 篇文章 0 订阅

订阅专栏

我也实在不知道标题该取什么，进来看看是否符合你的要求，符合就往下看，不符合就去看别的

话不多比，看原型

第一种操作：不知道叫啥名，直接看效果(我想叫他“磨损哥哥”)

磨损

话不多比直接上代码有哪里不太理解，可以直接在评论区问我，虽然我是菜狗。

<!-- 看似群英荟萃，实则坤坤主场 -->
<template>
    <div class="mix"></div>
</template>
<style>
.mix {
  width: 640px;/*设置同一宽高*/
  height: 640px;/*设置同一宽高*/
  background: url(../assets/640.gif) aqua;
  background-size: 100%;
  background-blend-mode: lighten;/*背景颜色与图像混合*/
  position: relative; /**为了让另一张图压上来 */
}

.mix::after {
  content: '';
  position: absolute;  /**压过上一张 */
  width: 640px;/*设置同一宽高*/
  height: 640px;/*设置同一宽高*/
  background: url(../assets/640.gif) #f00;
  background-size: 100%;
  background-blend-mode: lighten;  /*背景颜色与图像混合*/
  mix-blend-mode: darken;  /*两个图片混合到一起*/
  left: 10px;/*设置偏移量*/
  animation: shake 30ms infinite;  /**抖动动画 */
}

.mix::before {
  content: '';
  position: absolute;  /**压过上一张 */
  width: 640px;/*设置同一宽高*/
  height: 640px;/*设置同一宽高*/
  background: url(../assets/640.gif) rgb(6, 250, 108);
  background-size: 100%;
  background-blend-mode: lighten;  /*背景颜色与图像混合*/
  mix-blend-mode: darken;  /*两个图片混合到一起*/
  left: 5px;/*设置偏移量*/
  animation: shake 30ms infinite;  /**抖动动画 */
}

@keyframes shake {
  50% {
    transform: translateX(1%);/**动的幅度 */
  }
}
</style>

/*/-*-*/#@%^#*$)^)*$^#￥%&*#&^^())_//我是一条神奇的分割线#$%^&*())(*&^%$#$%^&*()(*&^%$

第二种效果：背景融合（我也不知道正规应该叫啥，话不多比，直接看效果）

背景融合

话不多比直接上代码有哪里不太理解，可以直接在评论区问我，虽然我是菜狗。

<!-- 看似群英荟萃，实则坤坤主场 -->
<template>
   <!-- 坤坤起舞 -->
    <div class="backImg">
      <div class="strove"></div>
    </div>
</template>
<style>
.backImg {
  width: 1080px;
  height: 770px;
  background: url(../assets/9625e1758b.jpg) white;
  background-size: 100%;
  position: relative;
}

.strove {
  width: 128px;
  left: 30%;
  top: 78%;
  height: 128px;
  background: url(../assets/640.gif) center/cover;
  background-size: cover;/**cover	此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。 */
  position: absolute;/**为了让另一张图压上去 */
  mix-blend-mode: multiply;/**在“正片叠底”模式中，查看每个通道中的颜色信息，并将“基色”与“混合色”复合。 */
  filter: contrast(3);/**调整元素的对比度。 */
}
</style>

/*/-*-*/#@%^#*$)^)*$^#￥%&*#&^^())_//我是一条神奇的分割线#$%^&*())(*&^%$#$%^&*()(*&^%$

第三种效果：内容不遮挡背景中的一些内容（凸显背景），话不多比直接看效果。

话不多比直接上代码有哪里不太理解，可以直接在评论区问我，虽然我是菜狗。

<template>
    <!-- 这就完了？不可能！下一个小黑子！ -->
    <div class="blackClass">
      小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小
      黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子
      小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小
      黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子
      小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小
      黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子
      小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小
      黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子
      小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小
      黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子
      小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小
      黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子
      小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小
      黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子
      小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小
      黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子
      小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小
      黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子
      小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小
      黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子
      小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小
      黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子 小 黑 子
    </div>
</template>

<style>
.blackClass {
  width: 640px;
  height: 640px;
  background: url(../assets/640.gif) rgb(0, 0, 0);
  background-size: 100%;
  position: relative;
  line-height: 1;
  background-clip: text;/**用于指定背景图片或颜色的裁剪方式，裁剪的区域是文本的轮廓。具体来说，就是将背景图片或颜色限制在文本的轮廓内，而不是整个元素的范围内。 */
  -webkit-background-clip: text;/**用于设置背景的裁剪方式，将背景裁剪为文本的形状。在使用该属性时，需要加上浏览器前缀 -webkit，以兼容不同的浏览器。 */
  color: transparent;/**透明 */
  filter: grayscale(1);/**调整元素的对比度。 */
  mix-blend-mode: hard-light;  /*强光模式*/
}
</style>

分比讲解没有，上来就是效果+代码+注释，符合我这种懒得动手的菜狗。

还是那句话，假如有疑问可以在评论区咱们一块讨论一下，别说请教，因为我是菜狗。

话不多比，再见！

九族高兴的摸不到头脑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css-实现图片的一些处理（备注：我不是小黑子，我是真IKUN）

*/-*-*/#@%^#*$)^)*$^#￥%&*#&^^())_//我是一条神奇的分割线#$%^&*())(*&^%$#$%^&*()(*&^%$/*/-*-*/#@%^#*$)^)*$^#￥%&*#&^^())_//我是一条神奇的分割线#$%^&*())(*&^%$#$%^&*()(*&^%$话不多比直接上代码有哪里不太理解，可以直接在评论区问我，虽然我是菜狗。话不多比直接上代码有哪里不太理解，可以直接在评论区问我，虽然我是菜狗。第一种操作：不知道叫啥名，直接看效果(我想叫他“磨损哥哥”)
复制链接

扫一扫