我想用CSS插入圖片，因爲我想在圖片上使用字幕。background-image url response image

我想要的是圖像完全顯示並且是響應。

任何人都可以幫助我嗎？

在這裏你可以看到我的HTML使用引導。正如你所看到的，我想讓contentblock1通過使用CSS背景圖像代碼來顯示響應式圖像。我也希望這個背景圖片有反應。但無論我嘗試它都不會顯示背景。

<div class="container"> 
     <div class="col-sm-6"> 
      <h1> Dit is een bootstrap site</h1> 
      <button type="button">click me!</button> 
     </div> 
     <div class="col-sm-6"> 
      <div class="contentblock1"> 

      </div> 
     </div>

我用下面的CSS

.contentblock1 { 
background-image: url('http://1.bp.blogspot.com/_zxdOSKs0ASI/TDMqbnatRwI/AAAAAAAAAkM/nB-DxcVcqqk/s1600/Testbeeld.jpg'); 
background-size: 100% 100%; 
width: 100%; 
}

來源

2014-08-30 Jeroen Wallbrink

你試過嗎？ http://stackoverflow.com/questions/9262861/css-background-image-to-fit-width-height-should-auto-scale-in-proportion – 2014-08-30 21:29:27

是的，我試過，但它不工作。當我給HTML一些休息我的形象出現，但那不是我想要的 – 2014-08-30 21:49:27

http://jsfiddle.net/nf1of39d/ – AvrilAlejandro 2014-08-30 23:21:22

width: 100px; /*you width*/ 
height: 100px; /*you height*/ 
/* optional: background-color: white; */ 
background-image: url('image.png'); 
background-repeat: none; 
background-size: 100% 100%; 
/*or 
background-size: cover; 
background-position: 50% 50%;*/ 
background-attachment: fixed;

來源

2014-08-30 21:33:06 AvrilAlejandro

嗨我試過我們的代碼。但是我的形象並沒有出現。 .contentblock1 { background-image：url（'http://freewallpaperspot.com/wallpapers/1024-768-3.jpg'）; background-size：cover; background-position：50％50％; background-attachment：fixed; } 這是我使用的代碼。 – 2014-08-30 21:39:34

缺少'http：// www.' – AvrilAlejandro 2014-08-30 21:40:37

用正確的鏈接更改了代碼。還是行不通。 .contentblock1 { background-image：url（'http://1.bp.blogspot.com/_zxdOSKs0ASI/TDMqbnatRwI/AAAAAAAAAkM/nB-DxcVcqqk/s1600/Testbeeld.jpg'）; background-size：cover; background-position：50％50％; background-attachment：fixed; } – 2014-08-30 21:43:30

#some-div { 
    background-image: <imgurl>; 
    background-repeat: none; //Unless you want something else 
    backgorund-size: 100% 100%; 
}

和響應速度，使用媒體查詢或爲響應由諸如引導一個lib。

下面有一個媒體查詢的例子。

@media (min-width: 1200px) 
{ 
    #some-div { 
     width: 600px; 
    } 
} 

@media (max-width: 768px) 
{ 

    #some-div { 
     width: 100%; 
    } 
}

編輯： http://jsfiddle.net/e8xLf4u3/

這是你的工作示例，它只是需要的內容。此外，在未來的請出示了更快的幫助和更好地理解

Graag gedaan一些代碼;）

來源

2014-08-30 21:33:21

我正在使用引導程序。你可以給我代碼嗎？ – 2014-08-30 21:41:05

是的即時通訊使用它。這是我的HTML。

Dit is een bootstrap site

– 2014-08-30 21:45:50

在您的例子，如果你在你的contentblock1加入IMG： CSS： .contenblock1 IMG { 寬度：100％; } 這應該夠了。 – 2014-08-30 21:47:06

background-image url response image

回答

Dit is een bootstrap site

相關問題