我正在尝试在一个用户信息框内放置一个化身和一些其他信息.我希望该头像保持在该容器的边框上,如下面的示例所示进行垂直翻译.
I am trying to make a user-information box where there is an avatar and some additional information. I want that avatar to stay on the border of that container, vertically translated as in the example below.
但是,正如您所看到的,当我翻译元素时,元素的某些部分变得不可见,因为内容没有被按下".如何获得相同的结果,但正确显示图像?我尝试使用 position:absolute 和 top 和 bottom 进行游戏,但是我无法达到预期的效果.
However, as you can see, when I translate the element some part of it becomes invisible, since the content is not "pushed" down. How can I achieve the same result, but properly displaying the image? I tried playing with position: absolute and top and bottom, but I wasn't able to achieve the desired result.
注意:在我的应用中,Bootstrap列内有一个 class ="profile-info-container" 的div,这就是为什么宽度设置为100%的原因.
Note: in my app, a div with class="profile-info-container" is inside a Bootstrap col, that's why width is set to 100%.
谢谢!
.profile-info-container { background-color: white; border: 2px solid #7EA2BC; border-radius: 10px; margin: 20px 10px; position: relative; text-align: center; min-height: 300px; height: auto; width: 100% } .profile-info-image { transform: translateY(-50%) rotate(45deg); border-radius: 100%; height: auto; margin: auto; width: 50%; border: 10px solid transparent; background-size: 100% 100%, 50% 50%, 50% 50%, 50% 50%; background-repeat: no-repeat; background-image: linear-gradient(white, white), linear-gradient(60deg, red 36%, red 30%), linear-gradient(120deg, yellow 36%, yellow 30%), linear-gradient(240deg, blue 36%, blue 30%); background-position: center center, left top, right top, left bottom, right bottom; background-origin: content-box, border-box, border-box, border-box, border-box; background-clip: content-box, border-box, border-box, border-box, border-box; } .profile-info-image img { transform: rotate(-45deg); border: 1px solid #7ea2bc; border-radius: 100%; height: 100%; width: 100%; } .half { width: 50%; } <div class="half"> <div class="profile-info-container"> <div class="profile-info-image"> <img src="www.ibts/wp-content/uploads/2017/08/iStock-476085198.jpg" /> </div> </div> </div> 推荐答案
代替使用 translate ,您可以在此处创建CSS网格布局:
Instead of using translate, you can create a CSS Grid layout here:
-
将 profile-info-container 设为网格容器
将 profile-info-image 放在第一列 spanning 两行中,
第三行图片下方的文本
边框背景是使用跨越第二行和第三行的伪元素制成的.
the border background is made using a pseudo element that spans the second and third rows.
请参见下面的演示
.profile-info-container { background-color: white; margin: 20px 10px; min-height: 300px; position: relative; text-align: center; height: auto; width: 100%; display: grid; /* grid container */ } .profile-info-container::after { content: ''; border: 2px solid #7EA2BC; border-radius: 10px; grid-row: 2 / 4; /* row 2 and 3*/ grid-column: 1; /* column 1 */ } h2 { grid-row: 3; /* row 3 */ grid-column: 1; /* column 1 */ } .profile-info-image { transform: rotate(45deg); /* <-- removed translate */ border-radius: 100%; height: auto; margin: auto; width: 50%; border: 10px solid transparent; background-size: 100% 100%, 50% 50%, 50% 50%, 50% 50%; background-repeat: no-repeat; background-image: linear-gradient(white, white), linear-gradient(60deg, red 36%, red 30%), linear-gradient(120deg, yellow 36%, yellow 30%), linear-gradient(240deg, blue 36%, blue 30%); background-position: center center, left top, right top, left bottom, right bottom; background-origin: content-box, border-box, border-box, border-box, border-box; background-clip: content-box, border-box, border-box, border-box, border-box; grid-row: 1 / 3; /* row 1 and 2 */ grid-column: 1; /* column 1 */ } .profile-info-image img { transform: rotate(-45deg); border: 1px solid #7ea2bc; border-radius: 100%; height: 100%; width: 100%; } .half { width: 50%; } <div class="half"> <div class="profile-info-container"> <div class="profile-info-image"> <img src="www.ibts/wp-content/uploads/2017/08/iStock-476085198.jpg" /> </div> <h2>Some text here</h2> </div> </div>
更多推荐
将div放置在另一个div的边框上
发布评论