标签: css-mask

使用 CSS mask 仅屏蔽元素的一部分

我有一个元素，我只想在元素的末尾屏蔽它。我设法编写了一些代码来屏蔽元素的末尾，但元素的其余部分现在也被屏蔽了。我想更改蒙版，以便蒙版左侧的所有元素仍然可见。

.masked {
  width: 300px;
  height: 30px;
  background-color: hotpink;
  mask-image: linear-gradient(to right, black, transparent);
  mask-size: 30px;
  mask-repeat: no-repeat;
  mask-position: right;
}

Run Code Online (Sandbox Code Playgroud)

<div class="masked"></div>

Run Code Online (Sandbox Code Playgroud)

css css-mask

Jon*_*ops

lucky-day

3
推荐指数

1
解决办法

1852
查看次数

使用 CSS 将外部渐变边框或覆盖形状添加到圆形图像

我正在尝试使用 CSS 将三种纯色的外部渐变边框（图 B）添加到图像（图 A），但到目前为止我尝试过的方法并没有太多运气。图像将具有 border-radius: 50% 以使它们成为圆形，并且外边框需要随图像缩放。我希望能够仅使用 CSS 类快速将其应用于任何图像。

我尝试过 SVG 蒙版、边框图像和常规叠加，但似乎都无法完成手头的任务。这支笔是我得到的最接近的，但是我需要图像和边框之间的空白。

.img-circle{
  border-radius: 50%;
} 
.border {
  margin: 25px 0;
  /*padding: 1em;*/
  border: 12px solid transparent;
  background-size: 100% 100%, 60% 60%, 40% 40%, 25% 50%;
  background-repeat: no-repeat;
  background-image: linear-gradient(white, white),
    linear-gradient(30deg, teal 36%, teal 30%),
    linear-gradient(120deg, gold 36%, gold 30%),
    linear-gradient(210deg, blue 36%, blue 30%);
  background-position: center center, left top, right top, left bottom, right bottom;
  background-origin: content-box, border-box, border-box, border-box;
  background-clip: …

Run Code Online (Sandbox Code Playgroud)

html css border css-gradients css-mask

Mar*_*sky

2022 01-19

3
推荐指数

1
解决办法

358
查看次数

使用图像和动画渐变背景遮盖 div

我目前正在设计一个具有动画渐变背景的徽标。

要求：

遮罩图像必须是 jpg 或 png
被屏蔽的元素最好是<div>
渐变应该是 CSS 并且最好来自<div>背景

面具应该看起来像这样：

我已经关闭了 CSS 动画，但是当涉及到<div>从 jpg 或 png 图像中剪切形状时，我似乎陷入了困境。

我想出了什么：

我不喜欢我当前的解决方案，因为它依赖于 SVG 动画，并且我屏蔽了 SVG<rect>元素而不是<div>. 如果主要使用 CSS 来实现，那么灵活性要低得多。但是，它完成了工作。

<!-- image masked gradient -->
<svg  height="200px" width="200px">  
    <defs>  
        <!-- the gradient for the rectangle element-->
        <linearGradient id='gradient1'>
            <stop stop-color='#020024'/>
            <stop offset='.35' stop-color='#090979'/>
            <stop offset='1' stop-color='#6699ff'/>
            </linearGradient>

        <!-- the mask shape of a thunder bolt -->
        <mask id="image-mask" x="0" y="0" width="100" height="100" >  
            <image href="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRU8cEP-xBjtmZ2ZhpNKMc0dwE7I5a-PB8RBA&usqp=CAU" …

Run Code Online (Sandbox Code Playgroud)

html css svg css-animations css-mask

Dis*_*oes

2022 09-12

2
推荐指数

1
解决办法

1160
查看次数