CSS implements plain text content element transparent background (compatible with IE6)

<span id="Label3"></p><p><p>Html:</p></p><pre><pre><div class= "title-wrapper" > <span class= "title" > <span class= "icon sp-index sp-index-tag-bg" > <i class= "mood2 sp-base" ></i> </span> <span class= "txt" > <span class= "occupy" > Wu Airport push luggage Liu poem walk its side beautiful leg </span> <a href= "/" target= "_blank" > Wu Airport push luggage car Liu poem walk the side beautiful leg < /a> </span> </span> </div></pre></pre><p><p>Css:</p></p><pre>. focus-<span style="color: #000000;"><span style="color: #000000;">r{width:480px;}. Focus</span></span>-r-<span style="color: #000000;"><span style="color: #000000;">base{width:480px;height:270px;position:relative;overflow:hidden;}. Focus</span></span>-r-base. title-wrapper{width:100%;height:50px;position:absolute;bottom:12px;text-<span style="color: #000000;"><span style="color: #000000;">align:center;}. Focus</span></span>-r-base. Title-wrapper. title{display:inline-<span style="color: #000000;"><span style="color: #000000;">block;}. Focus</span></span>-r-base. Title-wrapper. icon{width:50px;height:50px;<span style="color: #0000ff;"><span style="color: #0000ff;">float</span></span><span style="color: #000000;"><span style="color: #000000;">: left;}. Focus</span></span>-r-base. title-wrapper icon i{display:inline-block;width:33px;height:33px; margin-top:8px; text-indent:0<span style="color: #000000;"><span style="color: #000000;">;}. Focus</span></span>-r-base. Title-wrapper. txt{<span style="color: #0000ff;"><span style="color: #0000ff;">float</span></span>: left; height:34px;line-height:34px; padding-top:8px; Color: #fff; font-size:14px; word-spacing:0<span style="color: #000000;"><span style="color: #000000;">;}. Focus</span></span>-r-base. title-wrapper. txt. occupy{position:absolute; top:8px; background: #000; filter:alpha (opacity=60); opacity:.6 ; padding-right:10px; border-radius:0 15px 15px 0<span style="color: #000000;"><span style="color: #000000;">;}. Focus</span></span>-r-base. title-wrapper. txt a{color: #fff; padding-right:10px; position:relative; z-index:1;}</pre><p><p></p></p><p><p>The above is the main code, there are a few points to note:</p></p> <ul> <ul> <li>The use of RGBA to achieve compatibility problems, so the use of Two-tier coverage method</li> <li>When the float element is at a peer of the Position:absolute element, float appears before the absolutely positioned element when absolute positioning does not specify Top/left</li> <li>An absolutely positioned element when Top/left is not specified, it is positioned relative to the offsetparent content area (different browsers differ), and the margin margin is positioned relative to the offsetparent when the top/left is specified</li> <li>Inline-block the gap between elements, in addition to removing the empty space in the html, you can also set its word-spacing to Negative.</li> <li>Z-index applies only to the new cascading context, and the properties that establish the new cascading context have absolute/relative positioning and some CSS3 Properties. therefore, when using z-index, the element is set to the relative positioning</li> </ul> </ul><p><p>CSS implements plain text content element transparent background (compatible with IE6)</p></p></span>