Question

对此草图表示道歉，但似乎最能传达我的问题：

        +---------------+----------------+-----+
        |      div      |      v.div     |  d  |
        |               |                |  i  |
        +----+----------+----------------+  v  |
        | v  |                           |     |
        | .  |                           +-----+
        | d  |                           |  v  |
        | i  |            DIV            |  .  |
        | v  |         (content)         |  d  |
        |    |       variable size       |  i  |
        +----+                           |  v  |
        | d  |                           |     |
        | i  +------------------------+--+-----+
        | v  |          v.div         |   div  |
        +----+------------------------+--------+

我试图找出围绕一些可变大小内容的8个DIV的CSS。这些DIV中的每一个都具有背景图像，使得所有这些都看起来像包裹中心内容的形状角图框。外部，特别是角落DIV也需要透明，所以我之前使用的一些技巧不能很好地工作。显然，标记为“v.div”的DIV必须扩展以填充可变的高度和宽度;角落DIV是固定大小的。

通过一些图像剪切和粘贴，我可以将问题限制为这样的问题，如果之前的问题无法完成：

        +---------------+--------------+-------+
        |      div      |      v.div   |  div  |
        |               |              |       |
        +----+----------+--------------+-+-----+
        | v  |                           |     |
        | .  |            DIV            |  v  |
        | d  |         (content)         |  .  |
        | i  |       variable size       |  d  |
        | v  |                           |  i  |
        |    |                           |  v  |
        +----+---+--------------------+--+-----+
        |   div  |         v.div      |  div   |
        +--------+--------------------+--------+

有没有人做过这样的事情，愿意分享他们的解决方案或替代方法？

Answer 1

这是不是可以通过使用背景颜色/背景图像，填充和边框来解决？

<style>

#variableSize {padding: 1em;
               border: 3px solid #000;
               background-color: rgba(215,215,215,0.5);
               background-image: url(path/to/img.png);
               background-repeat: repeat;
               background-position: 0 0;
               -moz-border-radius: 2em;
               -webkit-border-radius: 2em;
              }

</style>

<div id="variableSize">
   <p>Variable size content.</p>
</div>

我承认它有兼容性问题，但rgba（）的使用可以用一个（部分）透明的png替换，以确保一些跨浏览器的支持？

我不太明白这个css如何容纳可变大小的内容。我估计至少有4个固定图像div（角落）和4个重复图像（X中2个，Y中2个）。真正的问题是如何安排花车，以及如何让重复的div填充可用空间 - Scott Evernden

我想我很遗憾地误解了这个问题。虽然上面的例子确实/应该有效，但它不会提供你所追求的图像角落。

如果您使用上述建议但在内容中包含图像作为图像角落，则可能有效：

<style>

#variableSize {padding: 1em;
               border: 3px solid #000;
               background-color: rgba(215,215,215,0.5);
               background-image: url(path/to/img.png);
               background-repeat: repeat;
               background-position: 0 0;
               -moz-border-radius: 2em;
               -webkit-border-radius: 2em;
               position: relative;
              }

#variableSize .topLeftImg
              {border: 0 none transparent;
               position: absolute;
               top: 0;
               left: 0;
               }

#variableSize .topRightImg
              {border: 0 none transparent;
               position: absolute;
               top: 0;
               right: 0;
               }

#variableSize .bottomLeftImg
              {border: 0 none transparent;
               position: absolute;
               bottom: 0;
               left: 0;
               }

#variableSize .bottomRightImg
              {border: 0 none transparent;
               position: absolute;
               bottom: 0;
               right: 0;
               }

</style>

<div id="variableSize">
   <img class="topLeftImg" src="path/to/image.png" />
   <img class="topRightImg" src="path/to/image.png" />
   <img class="bottomLeftImg" src="path/to/image.png" />
   <img class="bottomRightImg" src="path/to/image.png" />
   <p>Variable size content.</p>
</div>

#variableSize上的填充必须等于或大于图像的宽度/高度。但是应该工作吗？如果你不先试试，我会在今晚回家的时候尝试一下。

好的，在某个地方工作演示：a site。：）

Answer 2

也许这会有所帮助：http://www.neuroticweb.com/recursos/3-columns-layout/？

或者：http://www.tanfa.co.uk/css/layouts/css-3-column-layout-v1.asp

Answer 3

我相信使用CSS3可以实现一个div和多个背景所需的效果。宽度，高度和最后一个bg颜色可以更改，但请记住以顶层优先级顺序声明bg图像，因此在下面的示例中，topleft.png位于其他bg图像的“前面”。

希望有所帮助！

<强> HTML

 <div class="myframedimage"></div>

<强> CSS

.myframedimage { 
  width: 100%;
  height: 100%;
  background:
    url(topleft.png) top left no-repeat,    
    url(topright.png) top right no-repeat,       
    url(bottomleft.png) bottom left no-repeat,   
    url(bottomright.png) bottom right no-repeat, 
    url(top.png) top repeat-x,             
    url(bottom.png) bottom repeat-x,        
    url(left.png) left repeat-y,            
    url(right.png) right repeat-y,     
    url(image.png) center center no-repeat,
    #5d5d5d
}

http://jsfiddle.net/jlynchdotco/2Pkg6/

围绕可变大小内容的CSS不规则框架？

3 个答案: