如何使响应格背景图片

HTML：

<section id="first" class="story" data-speed="8" data-type="background"> 
    <div class="smashinglogo" id="welcomeimg" data-type="sprite" data-offsetY="100" data-Xposition="50%" data-speed="-2"></div> 
</section>

CSS：

#first .smashinglogo {background: url(../images/logo1.png) 50% 100px no-repeat fixed;}

来源

2014-02-25 User1038

使用background-size属性的值为100% auto来实现您正在查找的内容。

例如，

#first .smashinglogo{ 
    background-size:100% auto; 
}

希望这有助于。

PS：按照上面的代码，您可以删除fixed，并添加100% auto实现了输出。

来源

2014-02-25 06:46:56 Nitesh

对于此答案图像明显使用100％区域（太大）。顺便说一句感谢您的尝试 – User1038

这将使您的形象作出相应的响应。如果您发现100％太大，请设置适合您需求的百分比值。然后拉伸它并再次检查输出。如果仍然不起作用，请使用'background-size：100％auto;' - @Phoenix – Nitesh

是的，这是行得通的。再次感谢您 – User1038

尝试增加background-size:cover

.smashinglogo {background: url(../images/logo1.png) 50% 100px no-repeat fixed; 
    background-size: cover; 
    height:600px 
}

检查this tutorial的详细文章。

来源

2014-02-25 06:44:29 Sowmya

背景图片消失。 – User1038

@Phoenix检查更新后的答案 – Sowmya

制作响应式图片有很多方法。

基本规则是使用值%而不是pixel的值。其次是使用@media queries来定位移动设备和平板电脑。

您也可以使用CSS3的新技术，使图像响应：

.img-element: {url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

您可以通过点击此链接阅读更多关于响应图像。 http://css-tricks.com/which-responsive-images-solution-should-you-use/

来源

2014-02-25 06:52:33

尝试：

background-size:100% auto;

或

background-size: cover;

来源

2014-02-25 06:56:51 Iraj

代替使用固定

最大宽度：100％;

这将工作。

最终输出

.smashinglogo { 
    background: url(../images/logo1.png) 50% 100px no-repeat; 
    max-width: 100%; 
}

来源

2014-02-25 11:27:35

我只是一个答案，帮助我沿着相同的路线总结。

.smashinglogo { 
    max-width: 100%; 
background-size:100% auto; 
} 

.smashinglogo { 
    max-width: 100%; 
background-size:cover; 
}

上述两个代码都工作得很好。

来源

2015-06-09 23:05:31 Neophile

#first .smashinglogo{ 
background-image: url(../images/logo1.png); 
background-repeat: no-repeat; 
background-size: contain; 
background-position: 50% 50%; 
}

试试这个，它可能适合你。

来源

2016-01-14 11:30:35

如果div背景图像在堆叠在小设备上时消失（通常宽度小于577px），则添加“min-height：310px;”到你的CSS。

来源

2017-12-20 08:13:12

如何使响应格背景图片

回答

相关问题