怎么修改收录网站的标题,建造网站需要多少钱,网站建设的电话销售好做不,建筑人才网招聘电气工程师方法1#xff1a;通过css中filter:drop-shadow
首先需要一个容纳图标的父盒子(下方实例中的.svg-img)#xff0c;通过css造一个图标的‘影子’#xff08;.svg-color中的drop-shadow#xff09;#xff0c;然后设置‘影子’的颜色#xff0c;再把图标本体移出父盒子通过css中filter:drop-shadow
首先需要一个容纳图标的父盒子(下方实例中的.svg-img)通过css造一个图标的‘影子’.svg-color中的drop-shadow然后设置‘影子’的颜色再把图标本体移出父盒子让‘影子’占据本体所在位置最后后对父盒子设置溢出隐藏达到效果
drop-shadow 语法
filter: drop-shadow( offset-x offset-y blur-radius spread-radius color )
filter: drop-shadow( x轴偏移 y轴偏移 模糊半径 传播半径 投影颜色);
具体实现
div classsvg-img img classsvg-color :srcsvgUrl
/divscript setup
import { ref } from vue;
import svgUrl from ./icons/weather/100.svg; // 使用import语法引入SVGconst svgUrlRef ref(svgUrl); // 使用ref来创建响应式数据
/script.svg-img { width: 60px; height: 60px; overflow: hidden; display: inline-block; .svg-color{ width: 100%; height: 100%; transform: translateX(60px); filter: drop-shadow(#684a2c -60px 0px 0px); }
}translateX中的60px和drop-shadow中的-60px必须是一个相同的值并且最好是大于等于宽高的最大值这样设置得到的带颜色的阴影图片才会完整无误的在本体图片位置上。
方法2通过mask-image 属性引入svg图标并使用 background-color 改变svg图标颜色
img classsvg-color :style{ WebkitMaskImage: url(${svgUrl}), maskImage: url(${svgUrl}) } script setup
import { ref } from vue;
import svgUrl from ./icons/weather/100.svg; // 使用import语法引入SVGconst svgUrlRef ref(svgUrl); // 使用ref来创建响应式数据
/script.svg-color{ width: 60px; height: 60px; display: inline-block; background-color: #684a2c; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain;mask-size: contain;
}
