css - blockquote 元素中背景图像的阴影过滤器和其他设置

Question

我希望为每个 blockquote 元素创建一个样式规则:

一个。将背景图像设置为无平铺的 sf_speech.png，水平和垂直尺寸为 100% 以覆盖整个 block 引用和

uses the drop-shadow filter 添加 drop shadow filter 在语音气泡周围添加一个水平和垂直偏移为 5 像素，模糊为 10 像素，颜色为 rgb(51, 51, 51) 的投影

到目前为止，这是我的代码:

blockquote {
background: url(sf_speech.png) 100% 100% no-repeat;
filter: drop-shadow(5px 5px 10px rgb(51, 51, 51));
}

任何人都可以告诉我我缺少什么吗？

非常感谢

Answer 1

因为你没有添加对话泡泡的样子，所以我真的不能给出任何具体的制作技巧。因为您最终可能会在设计实际气泡的样式时遇到麻烦。

但是根据您当前的描述，这可以解决问题。

blockquote {
  background: url(https://placehold.it/1000x800) 100% 100% no-repeat;
  box-shadow: 5px 5px 10px rgb(51, 51, 51);
  padding: 10px;
}

<blockquote>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec nisl aliquam, lobortis erat in, posuere massa. Suspendisse commodo nisi id purus dapibus, quis scelerisque lectus auctor. 
</blockquote>