0

我想减小图像的大小以及放置图像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;
}

但这不起作用。

请指导

提前致谢

4

3 回答 3

3

要调整图像大小，您必须使用服务器端语言，例如 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>

检查小提琴。

编辑

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

<html>
    <head>
        <!-- head code -->
        <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 code -->
    </body>
</html>

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

于 2013-05-28T18:25:17.683 回答
0

看这个演示（更新）

使用描述图像应占父级百分比background-size: 100% 100%的值调整图像大小。%

+ background-size +background-position

于 2013-05-28T18:41:46.087 回答
0

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

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

然后你也可以丢失img标签。

于 2013-05-28T18:32:26.130 回答