1

我正在尝试将图像模型转换为 HTML/CSS，并且在调整窗口大小时，我正在努力正确定位并保持相对位置。

JSFiddle 代码：

http://jsfiddle.net/victorhooi/ZcrCc/

全屏 JSFiddle 输出：

http://jsfiddle.net/victorhooi/ZcrCc/embedded/result/

这是图像模型：

在此处输入图像描述

我不知道如何将粉红色和蓝色的鸟固定到类型上，并让它在不同的分辨率和调整窗口大小时都保持在那个位置。我想过使用max-width 100%and height: auto;，但这似乎不太奏效。

本质上，我希望粉红色的鸟始终位于小写字母“a”的顶部，而蓝色的鸟始终位于“r”的右下角，并且＆符号垂直居中并保持不变那里。

这是CSS：

/*TODO - There should be a way to do the two below using child selectors?*/

#alpha-bio-heading {
    color: #faaacd;
}

#victor-bio-heading {
    color: #85b1d8;
}

/*# TODO - Is there a way to fix this better for page resizes?*/
#pink-bio-bird {
    position: absolute;
    right: 55px;
    top: 28px;
}

#blue-bio-bird {
    position: absolute;
    right: 15px;
    top: 85px;
}        

/*TODO - There should be a better way to centre this within the box.*/
#ampersand {
    position: relative;
    bottom: -120px;
}
4

1 回答 1

1

你应该

  • 将鸟图像放入h1元素中。
  • 使h1元素相对定位。
  • 将图像的左/上位置调整到您想要的位置。

所做的更改

    #alpha-bio-heading {
        color: #faaacd;
        position:relative;
    }

    #victor-bio-heading {
        color: #85b1d8;
        position:relative;
    }

    #pink-bio-bird {
        left: 210px;
        position: absolute;
        top: 10px;
    }

    #blue-bio-bird {
        left: 245px;
        position: absolute;
        top: 60px;
    }

演示在http://jsfiddle.net/ZcrCc/3/

于 2013-09-30T19:22:16.967 回答