点图案叠加层在图像上渐隐
我想要一个覆盖图像的点图案，但是我需要它在右侧是透明的，并且我需要它变得不透明/对左侧可见-就像使用渐变来显示图案一样。
<html>
<head>
<style>
.image-container {
display: block;
background: url(https://cdn.getyourguide.com/img/location_img-59-1969619245-148.jpg) no-repeat;
background-size: cover;
height: 400px;
width: 837px;
}
.dot-overlay {
background: url(square-pattern.svg);
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<div class="image-container">
<img class="dot-overlay">
</div>
</body>
</html>结果
这是我想要达到的结果
编辑：抱歉，我忘了提到我需要此解决方案来响应（即使示例中的图像是固定大小的），并且最好在调整图像大小时也希望图案点保持相同的大小。
值得庆幸的是，Temani Afif解决方案可以对此进行管理，并且还可以控制渐变！另外，为了使点更方正，将每个百分比更改为50％，例如径向渐变（最远的一面，蓝色50％，透明50％）
尝试将图像放置在svg内，并在图像顶部放置一个带有点图案的矩形。
<style>
.image-container {
height: 100%;
width: 100%;
</style>
<div class="image-container" >
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="100%" viewBox="0 0 837 400" preserveAspectRatio="xMinYMin meet" >
<defs>
<pattern id="ptn1"
x="0" y="0" width="5" height="5"
patternUnits="userSpaceOnUse" >
<g fill="#7D515C" fill-opacity="0.5">
<path d="M 0,3 H 2 V 5 H 0 Z" style="fill:#222" />
</g>
</pattern>
</defs>
<g transform="translate(-40 0)">
<image xlink:href="https://cdn.getyourguide.com/img/location_img-59-1969619245-148.jpg" width="100%" height="100%" />
<rect width="800" height="400" fill="url(#ptn1)" />
</g>
</svg>
</div> 奖金
图案动画示例
下图显示了图案的外观。
<pattern id="ptn1"
x="0" y="0" width="22" height="22"
patternUnits="userSpaceOnUse" >
<g fill="#85D2FF" fill-opacity="0.9">
<rect x="1" y="1" width="10" height="10" />
<rect x="11" y="11" width="10" height="10" />
</g>
</pattern>
使用调整模式点大小的动画，您可以获得有趣的效果：
- 点的尺寸增大并与图片重叠
<rect x="0" y="0" width="2" height="2" >
<animate attributeName="width" values="2;22;22;2;2" begin="svg1.click" dur="6s"/>
<animate attributeName="height" values="2;22;22;2;2" begin="svg1.click" dur="6s"/>
</rect>
点击后动画
<pattern id="ptn1"
x="0" y="0" width="22" height="22"
patternUnits="userSpaceOnUse" >
<g fill="#85D2FF" fill-opacity="0.9">
<rect x="1" y="1" width="10" height="10" />
<rect x="11" y="11" width="10" height="10" />
</g>
</pattern>
- 百叶窗
<rect x="0" y="0" width="2" height="2" >
<animate attributeName="width" values="2;22;22;2;2" begin="svg1.click" dur="6s"/>
<animate attributeName="height" values="2;22;22;2;2" begin="svg1.click" dur="6s"/>
</rect>
- 垂直百叶窗
<style>
.container {
width:100%;
height:100%;
}
</style>
<div class="container">
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="100%" viewBox="0 0 1400 875" preserveAspectRatio="xMinYMin meet">
<defs>
<pattern id="ptn1"
x="0" y="0" width="22" height="22"
patternUnits="userSpaceOnUse" >
<g fill="skyblue" fill-opacity="0.8">
<rect x="0" y="0" width="2" height="2" >
<animate attributeName="width" values="2;22;22;2;2" begin="svg1.click" dur="6s"/>
<animate attributeName="height" values="2;22;22;2;2" begin="svg1.click" dur="6s"/>
</rect>
</pattern>
</defs>
<image xlink:href="https://i.stack.imgur.com/K37YC.jpg" width="100%" height="100%" />
<rect width="100%" height="100%" fill="url(#ptn1)" />
</svg>
</div>您可以使用 CSS 来radial-gradient实现点和mask渐变效果：
.image-container {
background: url(https://cdn.getyourguide.com/img/location_img-59-1969619245-148.jpg) no-repeat;
background-size: cover;
height: 300px;
width: 600px;
position:relative;
}
.image-container:before {
content:"";
position:absolute;
top:0;
right:0;
left:0;
bottom:0;
background: /* v-- Change to adjust the distance between circles */
radial-gradient(farthest-side,blue 80%,transparent 82%)
0 0/
10px 10px; /* Change to adjust the size */
-webkit-mask:linear-gradient(to right,#fff,transparent);
mask:linear-gradient(to right,#fff,transparent);
}<div class="image-container"></div>