sách gpt4 ăn đã đi

html - 使用 CSS sprites 在表单元素上定位背景图像

In lại 作者:技术小花猫 更新时间:2023-10-29 12:11:46 26 4
mua khóa gpt4 giày nike

我正在尝试将放大镜作为输入元素的背景。放大镜图标是 CSS Sprite 的一部分,如下所示:

nhập mô tả hình ảnh ở đây

为了定位它,我使用了这些属性:

#search-form input[type="text"] {
background: url('../images/icons.png') no-repeat left center;
background-position: 0px -30px;
border: 1px solid #a9e2ff;
đệm: 3px;
chiều rộng: 200px;
font-size: 1em;
đệm bên trái: 20px;
}

但背景仍然出现在输入框的顶部,而不是垂直居中偏左对齐。我也尝试过:

background: url('../images/icons.png') no-repeat left middle;

但这也不起作用。

如果它很重要,虽然我猜它不重要,但这是我的表单标记:




Cảm ơn sự giúp đỡ của bạn.

câu trả lời hay nhất

您声明了两次 background-position。第一个在 lý lịch 简写属性的末尾,第二个在下一行。 giải pháp:像这样拆分所有单个lý lịch 规则(此外,0 -24px 是正确的值):

#search-form input[type="text"] {
background-image: url('http://i.stack.imgur.com/MFpLm.png');
background-repeat: no-repeat;
background-position: 0 -24px;
border: 1px solid #a9e2ff;
đệm: 3px;
chiều rộng: 200px;
font-size: 1em;
đệm bên trái: 20px;
}

现在您可以面对设计的真正问题:如果其他 Sprite 之间没有足够的空间,它们将在输入区域中可见。

关于html - 使用 CSS sprites 在表单元素上定位背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9039883/

26 4 0
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress