Question

我有以下代码：

<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 
}

基本上我希望缩略图表能够在背景图像上方而不是在它之后，就在它下面。我的边界也是圆的。我怎么能绕过图像的边框，所以我没有那些尖锐的边缘？ THX

Answer 1

首先，有一个原因是你不能将你的图像设置为div的背景。

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

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

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

希望有所帮助

Answer 2

这就是round borders using CSS的方法：）

将图像背景拉伸成div

2 个答案: