divs和背景图像

所以这里是我想解决的问题，我想使用500像素宽的背景图像，我的div在右边有一个投影但是我希望文本停止并且在475px之后换行，我仍然希望整个图像显示出包含阴影。无论如何要完成这个？divs和背景图像

的html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <title>Untitled Document</title> 
     <link href="tech/sandbox2.css" rel="stylesheet" type="text/css" /> 
    </head> 
    <body> 
     <div id="page1top">top</div> 
     <div id="page1mid">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sodales, sapien vel porttitor eleifend, dui ante rutrum ligula, sed volutpat urna sapien vitae nisl. Vestibulum iaculis ligula elit, in dapibus urna. Aenean ullamcorper varius porttitor. Etiam facilisis ipsum vitae nulla gravida convallis sollicitudin nibh gravida. Fusce in turpis magna, at tempus lorem. Nulla sed mi libero. Aenean vulputate ultricies enim, sit amet vulputate arcu condimentum sed. Duis arcu metus, lobortis nec commodo non, suscipit semper lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus sit amet condimentum elit. Nullam interdum elit sapien. Curabitur lorem ligula, aliquam quis rhoncus ac, egestas vitae tellus. Phasellus quis massa quis eros gravida mollis posuere nec mi.</div> 
     <div id="page1btm">this is the bottom</div> 
    </body> 
</html>

CSS代码：

@charset "UTF-8"; 
/* CSS Document */ 

#page1top{ 
    position:relative; 
    background:url(../media/page1top.png) no-repeat; 
    width:500px; 
} 
#page1mid{ 
    position:relative; 
    background:url(../media/page1mid.png) repeat; 
    overflow:visible; 
    width:500px; 
    height:auto; 
    padding:30; 
    margin:30; 
    top:-10; 
} 
#page1btm{ 
    position:relative; 
    width:500px; 
    background:url(../media/page1btm.png) no-repeat; 
}

来源

2010-10-07 Joe

这取决于你正在使用的HTML，你可以在某处发布演示[JS Bin]（http://jsbin.com）和[JS Fiddle]（http://jsfiddle.net）都适用于这个，或者至少在这里发布代码。 – 2010-10-07 17:50:59

使用嵌套<div>标签。虽然@ Robusto的建议并不正确，但它在语义上并不理想。它将一个设计元素与一个样式描述符混合在一起。您的块元素应该确定这种设计间距，然后使用元素样式来控制文本本身的边距/填充。

CSS：

#page1top{ 
    position:relative; 
    background:url(../media/page1top.png) no-repeat; 
    width:500px; 
} 
#page1mid{ 
    position:relative; 
    background:url(../media/page1mid.png) repeat; 
    overflow:visible; 
    width:500px; 
    height:auto; 
    padding:30; 
    margin:30; 
    top:-10; 
} 
#page1btm{ 
    position:relative; 
    width:500px; 
    background:url(../media/page1btm.png) no-repeat; 
} 
.content_container{ 
    width: 475px; 
    overflow: inherit; 
}

HTML：

<div id="page1top">top</div> 
<div id="page1mid"> 
    <div class="content_container"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sodales, sapien vel porttitor eleifend, dui ante rutrum ligula, sed volutpat urna sapien vitae nisl. Vestibulum iaculis ligula elit, in dapibus urna. Aenean ullamcorper varius porttitor. Etiam facilisis ipsum vitae nulla gravida convallis sollicitudin nibh gravida. Fusce in turpis magna, at tempus lorem. Nulla sed mi libero. Aenean vulputate ultricies enim, sit amet vulputate arcu condimentum sed. Duis arcu metus, lobortis nec commodo non, suscipit semper lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus sit amet condimentum elit. Nullam interdum elit sapien. Curabitur lorem ligula, aliquam quis rhoncus ac, egestas vitae tellus. Phasellus quis massa quis eros gravida mollis posuere nec mi.</p> 
    </div> 
</div> 
<div id="page1btm">this is the bottom</div>

来源

2010-10-07 17:55:13

我在回答中纯粹用了风格属性来快速说明概念。 – Robusto 2010-10-07 18:50:28

@Robusto - 我可以欣赏。我只想指出我们答案中的细微差别。就像我说过的，我根本不认为你的答案是不正确的，但是我不想让它看起来像我刚才所说的那样反刍着。 – 2010-10-07 19:40:01

保持格在500像素宽，把文本里面的p标签，在宽度p标签设置为475px。

<div class="shadow-div" style="width:500px"> 
    <p style="width:475px"> 
    Text here blah blah blah. 
    </p> 
</div>

来源

2010-10-07 17:51:44 Robusto

你能修改你的HTML吗？

<div class="fancybackground"><div class="text">something</div></div>

CSS：

.fancybackground { background: url(...) } 
.text { margin-right: 25px; }

来源

2010-10-07 17:52:39 atomizer

如果您在填充申报单位，这可能会自动发生的为您服务。将padding: 30;更改为padding: 30px;。如果您需要更多填充，请调整数字。如果你不想在每一边填充，就写下来：padding: 10px 25px 10px 10px;。测量值顺时针旋转，因此它沿着顶部，右侧，底部，左侧移动;

来源

2010-10-07 17:59:48 Marcus

divs和背景图像

回答

相关问题