Question

我想缩小图片的大小以及放置图片background-position:center 10px;

<?xml version="1.0" encoding="ISO-8859-1"?>
<html>
<head><title>TFZIM3 RDA</title></head>
    <link rel="icon" type="image/png" href="logo.png" />
    <link rel="stylesheet" type="text/css" href="test.css" />
<body style="background-color:d8d8d8;" >
    <img class="normal" src="main.png" width="700" height="80" />

</body>

CSS

img.normal
{
background-position:center 10px;
}

但这不起作用。

请指导

提前致谢

Answer 1

要调整图像大小，您必须使用服务器端语言，例如php。你不能用标记语言来做。

对于图像居中，background-image属性用于背景，而不用于图像。图像是内联元素。因此，text-align: center;到父块元素应该起作用。但是，如果您想要放置图像并使其全屏显示，请使用以下代码：

<head>
    <style>
    body { position: relative; z-index: 0; }         

    .bg { 
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -100;
    }
    </style>
</head>
<body>
    <img class="bg" src="path/to/your-image.jpg">
</body>

Check the fiddle.

修改

要制作全屏背景图像，我现在使用CSS3 background-cover属性。你可以像下面这样使用它：

<html> <head>  <style> body { background: url('path/to/img') no-repeat center fixed; webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } </style> </head> <body>  </body> </html>

根据this网站，兼容性非常好。

Answer 2

您正在为图像设置样式，即为图像提供背景图像。尝试以下内容：

body {
    background:url(main.png);
    background-size:700px 80px;
    background-repeat:no-repeat;
    background-position:center 10px;
}

然后您还可能会丢失img标记。

Answer 3

请参阅此demo（已更新）

使用background-size: 100% 100%调整图片的大小%中的值描述了父级应该拍摄的百分比。

+background-size +background-position

图像使用HTML CSS定位

3 个答案: