将图像背景拉伸到 div 中答案

【问题标题】：Stretch image background into a div将图像背景拉伸到 div 中
【发布时间】：2011-12-10 22:17:32
【问题描述】：

我有以下代码：

<div id="intro_section_upper" >

                <%= image_tag("video_background.jpg", :id=>"video_bg") %>

                <div id="video_table_main" >

                    <table class="video_table">

                        <% count = 0 %>
                        <tr>
                        <% @f_videos.each do |f_video| %>

                            <td><div class= "video_cell">
                                <%= f_video.name %> </br>
                                <%= image_tag(f_video.thumbnail_url, :class => "video_thumb") %>
                            </td></div>

                            <% count +=1 %>

                            <% if count % 4 == 0 %>
                                </tr>
                            <% end %>

                        <% end %>

                    </table>

                </div>

现在我写的 CSS 是：

#intro_section_upper
{
    position: relative;
    width: 1024px;
    min-width: 1000px;
    min-height: 600px;
    margin: 150px auto;

    color: #333399;
    border-style:solid;
    border-width:1px;
    border-color:#3366CC;
    border-radius: 15px;

    background-color:#3366CC;   
    font-family: 'Arial';
    font-size:16px;

}

/* Float fix */
#video_table_main {

    height:600px; overflow:auto; 

    }

img#video_bg
{
    width:100%;
    height:100%;
}

/* Individual Video Data Cell Formatting */
.video_cell 
{   
    color: #C0C0C0; font-weight:bold; font-size:1em;
}

.video_thumb
{
    vertical-align:text-top;
    width: 180px;  
    height : 180px 
}

基本上，我希望缩略图表出现在背景图像之上，而不是在它之后，即在它之下。我的边框也是圆形的。我怎样才能把图像的边框也弄圆，这样我就没有那些尖尖的边缘了？谢谢

【问题讨论】：

您能提供我们生成的 HTML 吗？这与 RoR 无关。
我正在使用 ruby on rails 代码，所以我认为它可能是
RoR 并没有真正发挥作用，因为它会将 HTML 输出给最终用户。您遇到了 HTML 问题。

标签： html ruby-on-rails css

【解决方案1】：

首先，您不只是将图像设置为 div 的背景是有原因的。

#intro_section_upper{
   background-image:url("video_background.jpg");
   background-repeat:no-repeat;
}

如果有理由不使用背景图片，那么你可以设置

#video_table_main{
   position:absolute;
   top:0;
   left:0;
}

希望有帮助

【讨论】：

【解决方案2】：

这就是你制作round borders using CSS 的方法：)

【讨论】：