使用 CSS 缩放背景图像

发布于 2024-11-26 12:18:04 字数 45 浏览 1 评论 0原文

如何使用 CSS 缩放背景图像？图像附加了CSS，我想缩放它以适应一定的宽度

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

扭转时空 2024-12-03 12:18:04

您可以尝试以下代码：

.aboutpic {
width: 150px; /* replace 150px with something you need */ 
float: left;
background-image: url(../images/aboutpic.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
height: 139px; /* replace 139 px with something you need */
}

然后在 html 中输入：

<div class="aboutpic"></div>

它可以工作。我测试过。

You may try the following code:

.aboutpic {
width: 150px; /* replace 150px with something you need */ 
float: left;
background-image: url(../images/aboutpic.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
height: 139px; /* replace 139 px with something you need */
}

Then in the html just put:

<div class="aboutpic"></div>

It works. I tested it.

回复收藏 0 原文

帝王念 2024-12-03 12:18:04

使用 background-size属性（有限支持）。

回复收藏 0 原文

风月客 2024-12-03 12:18:04

Javascript 是一个很好的开始方式，“jquery.backstretch.js”是一个非常好的 jquery 库来缩放背景图像。

或者，如果您的目标客户端使用现代浏览器，这意味着它可以支持 CSS3，
使用这个：

body{
background:url(background.jpg);
background-repeat:no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

http://www.w3schools.com/cssref/css3_pr_background-size.asp< /a>

Javascript is a good way to start, "jquery.backstretch.js" is a very good jquery lib to scaling the background img.

Or, if your target client is using modern browser which means it can support CSS3,
use this:

body{
background:url(background.jpg);
background-repeat:no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

http://www.w3schools.com/cssref/css3_pr_background-size.asp

回复收藏 0 原文

~没有更多了~