CSS，如何在每一列的角落添加圖片

而這裏的簡要概述。

HTML：

<body> 
<div id="outerDiv"> 
    <div id="content"> 
     <div id="left"> 
      <p class="clear"></p> 
.... my content 
     </div> 
     <div id="center"> 
.... my content 
     </div> 
     <div id="right"> 
      <p class="clear"></p> 
.... my content 
     </div> 
     <p class="clear"></p> 
    </div> 
</div> 
</body>

CSS：

body { 
    font-family: Georgia, serif; 
    margin: -16px 0 0 0;   
    padding: 0;   
} 

#outerDiv { 
    width: auto;  
    margin: 0 auto;  
    height: 1110px; 
} 

#left { 
    float: left; 
    width: 32%; 
    height: 1110px; 
    margin: 0 0; 
    padding: 0 0 0 0; 
    overflow:scroll; 
} 

#center { 
    float: left; 
    width: 35%; 
    height: 1110px; 
    margin: 0 0; 
    padding: 0 0; 
    overflow:scroll; 
} 

#right { 
    float: left; 
    width: 32%; 
    height: 1110px; 
    margin: 0 0; 
    padding: 0 0 0 0; 
    overflow:scroll; 
}

圖片不要緊，東西只是小圖像。

感謝

編輯：它應該是html元素，然後我就可以與它進行交互。

來源

2011-06-13 megas

您不能通過CSS添加元素，只能對已存在的元素進行樣式設置。然而，既然你說你想通過jQuery與它進行互動，爲什麼不通過JavaScript添加元素呢？ – Josh 2011-06-13 21:44:49

請看編輯標籤 – megas 2011-06-13 21:45:07

編輯部分是**爲什麼**我發佈了該評論！ – Josh 2011-06-13 21:49:51

讓你的div position: relative

所以，你可以設置圖像的位置，這裏面：你爲什麼要使用

http://jsfiddle.net/5aFzh/8/

編輯

：margin: -16px 0 0 0;

這真的不是什麼margin是什麼，並會在晚些時候咬你。

來源

2011-06-13 21:45:22 PeeHaa

這是因爲我的瀏覽器（Chrome），感謝您的警告，我會記住它 – megas 2011-06-13 21:57:29

添加

background: url(yourimage.png) no-repeat;

來源

2011-06-13 21:33:59 GolezTrol

我忘了說它應該是html元素，我會通過jQuery與它交互。 – megas 2011-06-13 21:39:19

添加一類名爲「列」列，並添加背景圖像屬性

background-image:url('image.jpg'); 
background-repeat:no-repeat; 
background-position:right top;

來源

2011-06-13 21:36:47

#left, #center, #right { 
    background:url(image.jpg) top right no-repeat 
}

或者如果所有div S IN #content都列，您可以簡單地做：

#content div { 
    background:url(image.jpg) top right no-repeat 
}

來源

2011-06-13 21:37:38 Midas

CSS，如何在每一列的角落添加圖片

回答

相關問題