gpt4 book ai didi

html - 使用 HTML CSS 进行图像定位

转载 作者:太空宇宙 更新时间:2023-11-04 00:00:57 25 4
gpt4 key购买 nike

我想缩小图片,同时将图片放在 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;
}

但这行不通。

请指导

提前致谢

最佳答案

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

关于图像居中,background-image 属性用于背景,而不是图像。图片是行内元素。因此,父 block 元素的 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>
<!-- 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>

根据 this站点,兼容性非常好。

关于html - 使用 HTML CSS 进行图像定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16798860/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com