图片上怎么加before

图片上怎么加before,第1张

*** 作方法如下:

1、before无法直接定义图片宽高,用content:""。2、插入文本来定义文本高度,插入背景图片,background-size:cover或者contain,这个是设置背景图片自适应文本宽高,所以是通过文本宽高间接设置了图片宽高。

只有容器元素才可使用before、after伪元素,所谓容器元素,就是里面可以插入(或者说包含)其他元素的元素,比如div、span、b、i、li等等,而input、img等是不能包含其他元素的,所以无法使用before、after。

方法为:可以使用before或者after伪元素来实现。

具体的 *** 作步骤如下:

1、首先,创建一个新的html文件并编写一个input标签,如下图所示。

2、其次,将after伪元素添加到input标签前面的span标签,然后将伪元素的背景设置为要添加的图片,如下图所示。

3、最后,将相对位置添加到父元素,为了使伪元素能相对父级div定位。 通过调整after伪元素的left值和top值,可以将图片放入input框。这样,就实现了把一张图片弄到输入框里面了,如下图所示。


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/bake/7868605.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-04-10
下一篇2023-04-10

发表评论

登录后才能评论

评论列表(0条)

    保存