面试题：CSS背景属性的复杂布局

Question

页面中有一个不规则形状的SVG元素，现在要为其设置一个渐变背景颜色，从左上角的红色（#FF0000）渐变到右下角的黄色（#FFFF00），并且在SVG元素内部的指定位置（相对坐标(100, 100)）显示一个半透明的小图标（假设图标路径为'icon.png'）。请描述实现思路并写出关键的CSS代码。

Answer 1

实现思路

1. 渐变背景：使用 linear - gradient 函数来创建从左上角到右下角的渐变，通过设置 to bottom right 来指定渐变方向，以及渐变起始颜色（红色 #FF0000）和结束颜色（黄色 #FFFF00）。
2. 显示小图标：利用 background - image 属性设置图标路径，并通过 background - position 属性将图标定位到相对坐标 (100, 100)，同时设置 opacity 属性来控制图标透明度为半透明。

关键CSS代码

/* 假设SVG元素类名为 svg - element */
.svg - element {
    background: linear - gradient(to bottom right, #FF0000, #FFFF00);
    background - image: url('icon.png');
    background - position: 100px 100px;
    background - repeat: no - repeat;
    opacity: 0.5;
}