如何在 CSS 中将文本和图形重叠在徽标上方？

发布于 2024-10-14 15:46:36 字数 767 浏览 3 评论 0原文

我有一个在 Photoshop 中保存为 PNG 的徽标，该徽标具有不对称属性：

http: //img291.imageshack.us/img291/1226/examplexh.jpg 在此处输入图像描述

该轨迹是徽标的一部分，因此当我保存图像时，它会将其保存为大量图像长方形，路径下方有很多未使用的空间，而人头上方有一些未使用的空间。

问题是，我希望CSS（使用dreamweaver）看起来像我的图像中的模型，但我无法将上面的文本或下面的表格放在我的图像之上。

有解决方法吗？或者我是否需要分别保存人和踪迹并找到解决方法？

这是我目前拥有的 CSS：

{
    margin: 0px;
    padding: 0px;
}
#wrapper {
    height: 1.1in;
    width: 100%;
    background-color: #0277bc;
    position: relative;
}
#wrapper #logo {
    position: absolute;
    left: 40%;
    top: 25%;
}

徽标需要始终稍微偏左，表格始终位于中心，这就是我定义 % 的原因。

谢谢！

原文

I have a logo that I saved as a PNG in photoshop that has asymmetrical properties here:

http://img291.imageshack.us/img291/1226/examplexh.jpg
enter image description here

The trail is a part of the logo, so when I save the image, it saves it as a massive rectangle with a lot of unused space below the trail, and a bit of unused space above the guy's head.

The problem is, I would like the CSS (using dreamweaver) to look like the mockup in my image, but I can't place the text above or the table below overtop of my image.

Is there a workaround to this? Or am I going to need to save the person and the trail separately and find a way around that?

Here is the CSS I currently have:

{
    margin: 0px;
    padding: 0px;
}
#wrapper {
    height: 1.1in;
    width: 100%;
    background-color: #0277bc;
    position: relative;
}
#wrapper #logo {
    position: absolute;
    left: 40%;
    top: 25%;
}

The logo needs to always be slightly left of center with the table always be in the center, that's why I defined %'s.

Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

月野兔 2024-10-21 15:46:36

实际上，为您的徽标添加绝对位于左上角的元素很容易。页面的其余部分将显示在其正上方。

如果您希望徽标随页面移动，则需要将 div 居中，为其提供相对位置，居中，并使其固定宽度，有足够的空间容纳表格，两侧的边距可容纳左侧有徽标，右侧有一个空白区域（用于使表格居中）。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head>
        <title>SmartSolutions</title>
        <style type="text/css">
            #container {
                position: relative;
                width: 757px;
                margin: 0 auto;
            }
            #bluebar {
                background-color: blue;
                height: 60px;
                width: 100%;
                position: absolute;
            }
            #logo {
                background-image: 
                    url(http://img291.imageshack.us/img291/1226/examplexh.jpg);
                background-repeat: no-repeat;
                border: 1px solid green;
                position: absolute;
                width: 100%;
                height: 352px;
            }
            #page {
                z-index: 1;
                position: relative;
                width: 570px;
                margin: 0 0 0 160px;
                /* Top margin makes the whole lot move down. Padding instead */
                padding: 98px 0 0 0;
            }
            #page-contents {
                padding: 5px;
                border: 1px solid red;
                background-color: yellow;
            }
            h1 {
                visibility: hidden;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="bluebar"></div>
            <div id="logo">
                <h1>SmartSolutions</h1>
            </div>

            <div id="page">
                <div id="page-contents">
                    <h2>Page content goes here</h2>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                    Added doctype and put it through the w3 validator.
                    Sed pretium sapien porta nisi ultricies iaculis et
                    rhoncus nisl. 
                </div>
            </div>

        </div>
    </body>
</html>

It would actually be easy to include an <img> element for your logo that is positioned absolute in the top-left corner. The rest of the page would be displayed right over it.

If you want the logo to move with your page, you'll need to center a div, give it position relative, center it, and make it fixed width, with enough space to hold the table, and margins on both sides to hold the logo on the left and an empty space (for centering the table) on the right.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head>
        <title>SmartSolutions</title>
        <style type="text/css">
            #container {
                position: relative;
                width: 757px;
                margin: 0 auto;
            }
            #bluebar {
                background-color: blue;
                height: 60px;
                width: 100%;
                position: absolute;
            }
            #logo {
                background-image: 
                    url(http://img291.imageshack.us/img291/1226/examplexh.jpg);
                background-repeat: no-repeat;
                border: 1px solid green;
                position: absolute;
                width: 100%;
                height: 352px;
            }
            #page {
                z-index: 1;
                position: relative;
                width: 570px;
                margin: 0 0 0 160px;
                /* Top margin makes the whole lot move down. Padding instead */
                padding: 98px 0 0 0;
            }
            #page-contents {
                padding: 5px;
                border: 1px solid red;
                background-color: yellow;
            }
            h1 {
                visibility: hidden;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="bluebar"></div>
            <div id="logo">
                <h1>SmartSolutions</h1>
            </div>

            <div id="page">
                <div id="page-contents">
                    <h2>Page content goes here</h2>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                    Added doctype and put it through the w3 validator.
                    Sed pretium sapien porta nisi ultricies iaculis et
                    rhoncus nisl. 
                </div>
            </div>

        </div>
    </body>
</html>

回复收藏 0 原文

~没有更多了~