Question

目前，我使用HTML代码将我的徽标调用到我的网站：

<img alt="" src="images/Logo.png">

我尝试在CSS中使用@media，以及一些我自己的文本HTML想法，我无法弄清楚如何将徽标更改为有关屏幕分辨率的新徽标。

我没有尝试制作徽标＆＃34;更改尺寸＆＃34;，我试图将徽标更改为带有屏幕尺寸的新徽标

Answer 1

您只需使用元素的背景即可完成您想要的任务：

<div id="logo"></div>

#logo
{
    background: url("images/Logo.png") no-repeat;
    width: Xpx;
    height: Xpx;
}

@media(...)
{
    #logo
    {
        background-image: url("images/OtherLogo.png");
    }
}

此外，您可以使用CSS更改img src，但这与所有浏览器都不兼容：

@media(...)
{
    img
    {
        content: url("images/OtherLogo.png");
    }
}

Answer 2

我试图找到一种方法来更改徽标，同时在其下面保留响应式菜单。我想出了以下内容： HTML：

   <div class="logo" ><a href="index.html" ><img class="logoreg"src="your/image/here.png"  style='width:100%; max-width:300px' alt="" border="0">
<img class="logo240"src="your/image/here.png"  style='width:100%; max-width:300px' alt="" border="0" />

CSS：

    .logo {

    width:100%; 

    padding: 20px 0px 15px 0px;

}

.logoreg {
    visibility:visible; 
    max-width:300px;
}

.logo240 {

    visibility:hidden;
    max-width:220px;

}

对于转变：

 @media only screen and (max-width : 320px) {

.logoreg {
    visibility:hidden;  
     position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;

}

.logo240 {

    visibility:visible;
}
}

结果是，当屏幕尺寸大于320px时，将显示较大的图像，较小的图像将被推到菜单层后面，从隐藏的对象中移除间隙。

当图像达到320px或更低时，它会反转。如果有人发现任何缺陷。请告诉我！谢谢！

如何使用屏幕尺寸制作网站徽标“更改为新徽标”

2 个答案: