定位CSS背景图像x右边的像素?

    技术2022-07-10  124

    本文翻译自:Position a CSS background image x pixels from the right?

    I think the answer is no, but can you position a background image with CSS, so that it is a fixed amount of pixels away from the right? 我认为答案是否定的,但是你可以用CSS定位背景图像,这样它就是远离右边的固定数量的像素吗?

    If I set background-position values of x and y, it seems those only give fixed pixel adjustments from the left and top respectively. 如果我设置x和y的background-position值,那么它们似乎只分别从左侧和顶部进行固定像素调整。


    #1楼

    参考:https://stackoom.com/question/DPkY/定位CSS背景图像x右边的像素


    #2楼

    If the container has a fixed height: Tweek the percentages (background-position) until it fits correctly. 如果容器具有固定高度:调整百分比(背景位置)直到它正确适合。

    If the container has a dynamic height: If you want a padding between your background and your container (such as when custom styling inputs, selects), add your padding to your image and set the background position to right or bottom. 如果容器具有动态高度:如果要在背景和容器之间填充(例如在自定义样式输入,选择时),请将填充添加到图像并将背景位置设置为右侧或底部。

    I stumbled on this question while I was trying to get the background for a select box to fit say 5 px from the right of my select. 当我试图获得一个选择框的背景以适合我选择右边的5 px时,我偶然发现了这个问题。 In my case, my background is an arrow down that would replace the basic drop down icon. 在我的情况下,我的背景是一个向下箭头,将取代基本的下拉图标。 In my case, the padding will always remain the same (5-10 pixels from the right) for the background, so it's an easy modification to bring to the actual background image (making its dimensions 5-10 pixels wider on the right side. 在我的情况下,填充将始终保持相同(从右边5-10个像素)的背景,因此这是一个简单的修改,以带到实际的背景图像(使其尺寸在右侧宽5-10像素。

    Hope this helps! 希望这可以帮助!


    #3楼

    background-position: right 30px center;

    It works in most browsers. 它适用于大多数浏览器。 See: http://caniuse.com/#feat=css-background-offsets for full list. 请参阅: http : //caniuse.com/#feat=css-background-offsets以获取完整列表。

    More information: http://www.w3.org/TR/css3-background/#the-background-position 更多信息: http : //www.w3.org/TR/css3-background/#the-background-position


    #4楼

    Image workaround with transparent pixels on the right to serve as right margin. 图像解决方法右侧有透明像素,可用作右边距。

    The image workaround for the same is to create a PNG or GIF image (image file formats that support transparency) which has a transparent portion on the right of the image exactly equal to the number of pixels that you want to give a right margin of (eg: 5px, 10px, etc.) 同样的图像解决方法是创建PNG或GIF图像(支持透明度的图像文件格式),图像右侧的透明部分恰好等于您想要给出右边距的像素数(例如:5px,10px等)

    This works well consistently across fixed widths as well as widths in percentages. 这在固定宽度和百分比宽度上都能很好地协同工作。 Practically a good solution for accordion headers having a plus/minus or up/down arrow image on the header's right! 实际上是手风琴标题的一个很好的解决方案,在标题右侧有正/负或上/下箭头图像!

    Downside: Unfortunately, you cannot use JPG unless the background portion of the container and the background color of the CSS background image are of the same flat color (with out a gradient/vignette), mostly white/black etc. 缺点:不幸的是,你不能使用JPG,除非容器的背景部分和CSS背景图像的背景颜色是相同的平面颜色(没有渐变/晕影),主要是白/黑等。


    #5楼

    Solution for negative values. 负值的解决方案。 Adjust the padding-right to move the image. 调整右侧填充以移动图像。

    <div style='overflow:hidden;'> <div style='width:100% background:url(images.jpg) top right; padding-right:50px;'> </div> </div>

    #6楼

    只需将像素填充放入图像中 - 将10px或其他任何内容添加到photohop中图像的画布大小,并在CSS中对齐它。

    Processed: 0.011, SQL: 9