css - 在图像周围环绕背景填充
问题描述
我已经使用 shape-outside 将文本包裹在图像周围，就像这样
#hero .curve {
width: 33%;
height: auto;
min-width: 150px;
float: left;
margin-right: 2rem;
border-radius: 50%;
-webkit-shape-outside:circle();
shape-outside: circle();
}
但是我怎样才能把同一个文本区域变成一个形状呢？我正在尝试在不使用 Photoshop 的情况下制作标题；我想要左上角的徽标，带有一条环绕徽标的彩色条，然后拉伸页面的宽度。
我喜欢这种方法“倒置”边界半径可能吗？，但我希望有一些自动的东西，比如shape-outside: circle();工作原理。我想将其用作顶部导航，并带有跨度链接。供参考。如果我没有正确描述它，我附上了我希望它看起来像的模型。标题样机示例
感谢您的任何见解！
周杰伦
解决方案
我一遍又一遍地用大量不同的方法来尝试实现我的目标，但它们都达不到我理想的解决方案。我在 CSS 中尝试过background-color: #000;，它只是用颜色填充了整个文本块。然后我尝试使用内联 CSS 作为 BG 颜色，它可以单独在文本周围添加颜色，但它看起来像你从大公司或政府机构看到的经过编辑的文本。我希望它只是像文本一样围绕圆圈形成的颜色shape-outside: circle();. 我找不到任何代码可以用任何真正优雅的形状来做到这一点，而且我对 SVG 还不是很好......无论如何，我尝试使用'line-height：1;' 但它不会小于 1，因此文本之间仍然存在线条。仍然编辑。然后我尝试了字体、文本大小和符号，但我意识到文本在圆圈周围看起来很好的唯一原因是因为字母和句子之间的空格，否则它总是有 90 度角。总是。所以它不会像 Photoshop 等中的图像那样好看。然后我记得编写了一个列表并试图让项目符号在垂直方向上靠得更近，结果由于线条太小而意外地重叠了文本。我想如果 HTML5 不允许我将 'line-height' 设为小于 1，我会尝试使用 'list-style-type: none;' 来尝试 'ul' 或 'ol' 'li'。我能够重叠文本以使线条尽可能接近，但它仍然有那些不能很好地围绕圆圈播放的方形边缘。我玩弄了符号和不同的字母，但我使用了“⊕”，因为如果你愿意的话，它占据了最大的“表面积”。我尝试以两种方式破解它到星期二，但我已经按照自己的喜好解决了。这是一个 hack，它当然不优雅，但它可以满足我的需要。这是我的代码。就像我说的那样，它并不漂亮——近乎丑陋。为了这篇文章的目的，我将在这里完整地发布 CSS，但是 HTML 太多余了，因为我一遍又一遍地打印相同的符号来创建线条，而且字体太小，花了很多线条制作形状。感觉就像我上小学时在 DOS 上画画一样。但是 HTML 是如此多余，因为我一遍又一遍地打印相同的符号来创建线条，而且字体非常小，需要很多线条来制作形状。感觉就像我上小学时在 DOS 上画画一样。但是 HTML 是如此多余，因为我一遍又一遍地打印相同的符号来创建线条，而且字体非常小，需要很多线条来制作形状。感觉就像我上小学时在 DOS 上画画一样。
这里是截断的 HTML。想象一下同样的“里”还有 150 行。
总的来说，现在，感谢 Stack Overflow 及其社区的到来。这是我的第一篇文章，但我已经来过这里数百次了，我相信我们都去过。
<style> #hero { font-family: 'Quicksand', sans-serif; } #hero p { line-height: 1.8; background: rgba(204, 204, 204, 0.0); padding-right: 4%; } #hero .curve { width: 33%; height: 33%; min-width: 150px; float: left; margin-right: 2rem; border-radius: 50%; -webkit-shape-outside:circle(); shape-outside: circle(); background-color: rgba(255,255,255,8); } ol, ul, li { list-style-type: none; font-weight: bold; font-size: 50%; text-shadow: 2px 2px #000; } </style> </head> <body> <div id="hero"> <img src="../images/jh-logo-lg.png" style="width: 5%; height: 5%;" class="curve"> <p> <ul style="line-height: 0"> <li>⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕</li> </ul> </div> </body> </html>
推荐阅读
- xcode - iOS12 adMob 奖励视频：测试广告不起作用
- java - Wildfly 忽略 WEB-INF/lib 中的库
- cordova - 索引页面上显示的所有 Cordova 页面无法导航
- api - 有没有办法保护前端页面上的 API 密钥？
- asp.net - 调试运行缓慢的 ASP.NET 网站？
- javascript - 如何让子 div 覆盖其在网格中的父位置？
- c# - 如何在 c# .net 的 Active Directory 中返回成员所属的每个组的显示名称？
- mysql - 如何将mysql服务器连接到grafana？
- elasticsearch - 如何使用没有小写字母的 Elasticsearch 标准分析器
- sorting - 打开文件，删除零，排序 - NASM