1

我正在使用带有 C# 后端的 ASP.NET，并且希望网站显示移动版和桌面版的不同图像。我想我可以用 CSS 做到这一点，但不知道怎么做。我设置了不同的 css 文件并为其他元素工作，但是对于这些 ImageButtons，我有一些不好的行为。如果我不设置 ImageUrl 属性，它会执行我需要的操作，但会在我的按钮周围放置“搜索”和灰色轮廓，因为它正在寻找不存在的 ImageUrl 路径。如果我确实设置了 ImageUrl 属性，如下所示，文本和框会消失，但图像不会按照我的需要更改。我已经用 a 和 img 标签和 LinkBut​​tons 尝试过这个，但两种方式都得到了相同的结果。如果用户通过移动设备访问，更改这些按钮的大小和图像的最佳方法是什么？

<div class="clear hideSkiplink">
    <asp:ImageButton ID="button1" runat="server" CssClass="button1" 
    OnCommand="ImageButton_Click" CommandName="button1" 
    ImageUrl="~/images/topbutton1.png"/>
    ...
    <asp:ImageButton ID="button4" runat="server" CssClass="button4" 
    OnCommand="ImageButton_Click" CommandName="button1" 
    ImageUrl="~/images/topbutton4.png"/>
</div>

CSS 类如下所示：

普通的：

.topbutton1
{
    padding: 0px 2px;
    background-image: url('../images/topbutton1.png');
    background-position: center center;
    background-repeat: no-repeat;
    display: inline;
    width: 180px;
    height: 60px;
}

移动的：

.topbutton1
{
    padding: 0px 2px;
    background-image: url('../images/topbutton1mobile.png');
    background-position: center center;
    background-repeat: no-repeat;
    display: inline;
    width: 20%;
    height: auto;
}
4

1 回答 1

1

使用 CSS 媒体查询根据屏幕大小切换图像：

CSS 媒体查询简介

于 2013-10-22T22:56:51.720 回答