📌  相关文章
📜  如何在 CSS 中使用 ::before 伪选择器放置背景图像?

📅  最后修改于: 2021-08-31 07:41:25             🧑  作者: Mango

给定一个网页,任务是使用::before伪选择器将背景图像放置在网页上。

::before伪选择器用于在所选项目的内容之前放置一些东西。

句法:

.container::before{
    content: '';
    background: url(image file);
    position:absolute;
    top:0px;
    left:0px;
}

方法:::before伪选择器将背景图像放置在被选元素之前,如果被选元素具有与之关联的背景颜色,我们可以使用z-index属性使背景图像可见。

例子:

HTML


  

    
    
          
    
        How to place the background image 
        using ::before pseudo selectors ?
    
  
    

  

    
        GeeksforGeeks

        How to place background image using         ::before pseudo selectors ?     
  


输出:

图片参考: https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200212230557/How-To-Become-A-Web-Developer-in-2020-A-Complete-Guide.png