css如何在div的右上角添加一张图片

在css中 , 可以使用定位属性实现在div的右上角添加一张图片 。 下面小编举例讲解css如何在div的右上角添加一张图片 。

css如何在div的右上角添加一张图片



需要这些哦
联想笔记本Air14
操作系统Windows 10
z studio10.0
html+css
方式/
1【css如何在div的右上角添加一张图片】新建一个html文件 , 定名为test.html , 用于讲解css若何在div的右上角添加一张图片 。
css如何在div的右上角添加一张图片



2在test.html文件内 , 建立一个div模块 , 在div内 , 建立一张图片 。
css如何在div的右上角添加一张图片



3在test.html文件内 , 设置div的class属性为bbtwo 。
css如何在div的右上角添加一张图片



4在css标签内 , 经由过程class设置div的样式 , 界说它的宽度、高度、布景色、外边距 , 并利用position属性设置它为相对定位 。
css如何在div的右上角添加一张图片



5在css标签内 , 再经由过程class设置图片的样式 , 利用position属性设置它为绝对定位 , 标的目的上偏移15px , 标的目的右偏移15px 。
css如何在div的右上角添加一张图片



5
6在浏览器打开test.html文件 , 查看实现的结果 。
css如何在div的右上角添加一张图片



总结:11、建立一个div模块 , 在div内 , 建立一张图片 。 2、设置div的class属性为bbtwo 。 3、在css标签内 , 经由过程class设置div的样式 , 界说它的宽度、高度、布景色、外边距 , 并利用position属性设置它为相对定位 。 4、在css标签内 , 再经由过程class设置图片的样式 , 利用position属性设置它为绝对定位 , 标的目的上偏移15px , 标的目的右偏移15px 。 5、在浏览器打开test.html文件 , 查看实现的结果 。


以上内容就是css如何在div的右上角添加一张图片的内容啦 , 希望对你有所帮助哦!

    猜你喜欢