CSS剪辑路径未调整大小元素

CSS剪辑路径未调整大小元素

关注
发信
关注(28)粉丝(399)

html - CSS剪辑路径未调整大小元素

我正在尝试创建一个裁剪的图像作为页面的标题。目前，我具有所需的剪切形状，但是图像仍被隐藏部分从顶部向下推。有没有一种方法可以将其移至页面顶部并使文本在下面流动？如果没有，我只会在外面裁剪图像，但我想学习如何使用代码来实现。



.headerImage{
  shape-outside: polygon(0 18%, 100% 18%, 100% 68%, 0 86%);
  -webkit-shape-outside: polygon(0 18%, 100% 18%, 100% 68%, 0 86%);
  float: left;
  clip-path: polygon(0 18%, 100% 18%, 100% 68%, 0 86%);
  -webkit-clip-path: polygon(0 18%, 100% 18%, 100% 68%, 0 86%);
}

<img class="headerImage" src="https://lh3.googleusercontent.com/8nFQGEakirW2bqLvQE5GAUF9soiP1VQ9jm2OVA4SdXkI8gPLE2z3RVG-3eupsZbDHqmNL2ATWv7rzAHoM6F6W0bQNzUPKPFfUh56WIWoGndz7FG-9O9esFh8iUJ8NhoRxDxF0hL6eFXSYrCwfNPu7f3xj7n3TWpl_29ZJJNOmt0quMytlpcmwN0z8u1g4ybcM3kbUispBTy_rSHVkaxgx-XaVcpN8wcnguqr3Tw_qezgg3Dic9MGxwaKvZzc2HJnI9KIq_QE1cYiazvElMKELhRJ-43HHWDDnLwF5TjTxfXZO0VQz6kCa-tPDGOA4YqjC5EOPpM1MYjsQq4do7AVRwqQsYOcNpIHJ3KBbOAsHACBl0P51JgnHXPgIHEYFrV2jXsmz9aTRbzVymUOrlSDjfDgOYiDY4_oLWAlKs3uvYD-xvJRljVRH18F4SFGjjuaxTokIkHlhPrk2H2q4SGjCBjaqdJQful5HCd5cmdVlhRonYibSZlR0HAD4dB1CnHbTlWeX2g4u2bra3cS70QrjbT_ETEQ_GM11MqH4UeSz3BzfYRRyJua1lOYl-SHv500Ic5onrwuUeyrVrJdwqC-X6eIO0h2SKFxd9NJvXszCnMZ2sqKX2XyBpUI=w1280-h720-no" alt="Header Image"/>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis impedit libero esse odio excepturi fuga est ut itaque a quod suscipit, rerum asperiores. Consequuntur voluptates illo rerum recusandae pariatur asperiores, aspernatur, saepe ipsum error dolorem, quod inventore possimus modi deleniti tenetur et officiis. Nemo ab in totam ratione sequi error, ea dolorum repudiandae omnis, eaque facere impedit fugiat. Dolorum distinctio autem sequi enim quidem esse accusamus repudiandae voluptatum nobis, velit, molestiae. Eaque maiores, harum. Saepe esse repellendus sint. Labore provident optio quis commodi quod quaerat quo similique perspiciatis libero facere. Suscipit odit quas nemo, enim laudantium, provident repellendus natus nostrum facilis expedita adipisci qui, harum minus quidem officia cupiditate repellat ut praesentium. Possimus corporis, error atque ex adipisci, illum suscipit pariatur saepe impedit aliquam amet eos reiciendis quidem hic, nisi. Sint nobis modi, nesciunt quasi placeat quia. Veniam inventore corrupti quisquam illum debitis vitae accusamus nobis alias cum iste error magnam, cupiditate earum! Incidunt at consequuntur, rem ipsa odio ipsum deleniti repudiandae blanditiis harum ut in, fugit officia rerum ad, corporis dolore! Commodi repellendus esse quibusdam enim qui totam ipsum, consequuntur officia vel dolores, quod corrupti eveniet maiores minus explicabo, sapiente ratione doloribus laboriosam impedit nesciunt a obcaecati quam veritatis! Placeat, velit possimus delectus, atque voluptate iste alias illo, dolor odit ipsa facere quibusdam? Non omnis aliquid eveniet fuga labore dolores, autem blanditiis, dolorem error ex enim fugiat quisquam aut reprehenderit delectus, nihil accusamus eaque at odit natus accusantium sunt asperiores unde? Tempora dolorem, ad quidem quis adipisci dolores tempore. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis impedit libero esse odio excepturi fuga est ut itaque a quod suscipit, rerum asperiores. Consequuntur voluptates illo rerum recusandae pariatur asperiores, aspernatur, saepe ipsum error dolorem, quod inventore possimus modi deleniti tenetur et officiis. Nemo ab in totam ratione sequi error, ea dolorum repudiandae omnis, eaque facere impedit fugiat. Dolorum distinctio autem sequi enim quidem esse accusamus repudiandae voluptatum nobis, velit, molestiae. Eaque maiores, harum. Saepe esse repellendus sint. Labore provident optio quis commodi quod quaerat quo similique perspiciatis libero facere. Suscipit odit quas nemo, enim laudantium, provident repellendus natus nostrum facilis expedita adipisci qui, harum minus quidem officia cupiditate repellat ut praesentium. Possimus corporis, error atque ex adipisci, illum suscipit pariatur saepe impedit aliquam amet eos reiciendis quidem hic, nisi. Sint nobis modi, nesciunt quasi placeat quia. Veniam inventore corrupti quisquam illum debitis vitae accusamus nobis alias cum iste error magnam, cupiditate earum! Incidunt at consequuntur, rem ipsa odio ipsum deleniti repudiandae blanditiis harum ut in, fugit officia rerum ad, corporis dolore! Commodi repellendus esse quibusdam enim qui totam ipsum, consequuntur officia vel dolores, quod corrupti eveniet maiores minus explicabo, sapiente ratione doloribus laboriosam impedit nesciunt a obcaecati quam veritatis! Placeat, velit possimus delectus, atque voluptate iste alias illo, dolor odit ipsa facere quibusdam? Non omnis aliquid eveniet fuga labore dolores, autem blanditiis, dolorem error ex enim fugiat quisquam aut reprehenderit delectus, nihil accusamus eaque at odit natus accusantium sunt asperiores unde? Tempora dolorem, ad quidem quis adipisci dolores temporeNon omnis aliquid eveniet fuga labore dolores, autem blanditiis, dolorem error ex enim fugiat quisquam aut reprehenderit delectus, nihil accusamus eaque at odit natus accusantium sunt asperiores unde? Tempora dolorem, ad quidem quis adipisci dolores temporeNon omnis aliquid eveniet fuga labore dolores, autem blanditiis, dolorem error ex enim fugiat quisquam aut reprehenderit delectus, nihil accusamus eaque at odit natus accusantium sunt asperiores unde? Tempora dolorem, ad quidem quis adipisci dolores temporeNon omnis aliquid eveniet fuga labore dolores, autem blanditiis, dolorem error ex enim fugiat quisquam aut reprehenderit delectus, nihil accusamus eaque at odit natus accusantium sunt asperiores unde? Tempora dolorem, ad quidem quis adipisci dolores temporeNon omnis aliquid eveniet fuga labore dolores, autem blanditiis, dolorem error ex enim fugiat quisquam aut reprehenderit delectus, nihil accusamus eaque at odit natus accusantium sunt asperiores unde? Tempora dolorem, ad quidem quis adipisci dolores temporeNon omnis aliquid eveniet fuga labore dolores, autem blanditiis, dolorem error ex enim fugiat quisquam aut reprehenderit delectus, nihil accusamus eaque at odit natus accusantium sunt asperiores unde? Tempora dolorem, ad quidem quis adipisci dolores tempore</p>

最佳答案

如果要将图像保留在顶部，只需删除float属性。

例：



.headerImage{
  shape-outside: polygon(0 18%, 100% 18%, 100% 68%, 0 86%);
  -webkit-shape-outside: polygon(0 18%, 100% 18%, 100% 68%, 0 86%);
  clip-path: polygon(0 18%, 100% 18%, 100% 68%, 0 86%);
  -webkit-clip-path: polygon(0 18%, 100% 18%, 100% 68%, 0 86%);
  background: red;
}

<img class="headerImage" src="https://lh3.googleusercontent.com/8nFQGEakirW2bqLvQE5GAUF9soiP1VQ9jm2OVA4SdXkI8gPLE2z3RVG-3eupsZbDHqmNL2ATWv7rzAHoM6F6W0bQNzUPKPFfUh56WIWoGndz7FG-9O9esFh8iUJ8NhoRxDxF0hL6eFXSYrCwfNPu7f3xj7n3TWpl_29ZJJNOmt0quMytlpcmwN0z8u1g4ybcM3kbUispBTy_rSHVkaxgx-XaVcpN8wcnguqr3Tw_qezgg3Dic9MGxwaKvZzc2HJnI9KIq_QE1cYiazvElMKELhRJ-43HHWDDnLwF5TjTxfXZO0VQz6kCa-tPDGOA4YqjC5EOPpM1MYjsQq4do7AVRwqQsYOcNpIHJ3KBbOAsHACBl0P51JgnHXPgIHEYFrV2jXsmz9aTRbzVymUOrlSDjfDgOYiDY4_oLWAlKs3uvYD-xvJRljVRH18F4SFGjjuaxTokIkHlhPrk2H2q4SGjCBjaqdJQful5HCd5cmdVlhRonYibSZlR0HAD4dB1CnHbTlWeX2g4u2bra3cS70QrjbT_ETEQ_GM11MqH4UeSz3BzfYRRyJua1lOYl-SHv500Ic5onrwuUeyrVrJdwqC-X6eIO0h2SKFxd9NJvXszCnMZ2sqKX2XyBpUI=w1280-h720-no" alt="Header Image"/>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis impedit libero esse odio excepturi fuga est ut itaque a quod suscipit, rerum asperiores. Consequuntur voluptates illo rerum recusandae pariatur asperiores, aspernatur, saepe ipsum error dolorem, quod inventore possimus modi deleniti tenetur et officiis. Nemo ab in totam ratione sequi error, ea dolorum repudiandae omnis, eaque facere impedit fugiat. Dolorum distinctio autem sequi enim quidem esse accusamus repudiandae voluptatum nobis, velit, molestiae. Eaque maiores, harum. Saepe esse repellendus sint. Labore provident optio quis commodi quod quaerat quo similique perspiciatis libero facere. Suscipit odit quas nemo, enim laudantium, provident repellendus natus nostrum facilis expedita adipisci qui, harum minus quidem officia cupiditate repellat ut praesentium. Possimus corporis, error atque ex adipisci, illum suscipit pariatur saepe impedit aliquam amet eos reiciendis quidem hic, nisi. Sint nobis modi, nesciunt quasi placeat quia. Veniam inventore corrupti quisquam illum debitis vitae accusamus nobis alias cum iste error magnam, cupiditate earum! Incidunt at consequuntur, rem ipsa odio ipsum deleniti repudiandae blanditiis harum ut in, fugit officia rerum ad, corporis dolore! Commodi repellendus esse quibusdam enim qui totam ipsum, consequuntur officia vel dolores, quod corrupti eveniet maiores minus explicabo, sapiente ratione doloribus laboriosam impedit nesciunt a obcaecati quam veritatis! Placeat, velit possimus delectus, atque voluptate iste alias illo, dolor odit ipsa facere quibusdam? Non omnis aliquid eveniet fuga labore dolores, autem blanditiis, dolorem error ex enim fugiat quisquam aut reprehenderit delectus, nihil accusamus eaque at odit natus accusantium sunt asperiores unde? Tempora dolorem, ad quidem quis adipisci dolores tempore. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis impedit libero esse odio excepturi fuga est ut itaque a quod suscipit, rerum asperiores. Consequuntur voluptates illo rerum recusandae pariatur asperiores, aspernatur, saepe ipsum error dolorem, quod inventore possimus modi deleniti tenetur et officiis. Nemo ab in totam ratione sequi error, ea dolorum repudiandae omnis, eaque facere impedit fugiat. Dolorum distinctio autem sequi enim quidem esse accusamus repudiandae voluptatum nobis, velit, molestiae. Eaque maiores, harum. Saepe esse repellendus sint. Labore provident optio quis commodi quod quaerat quo similique perspiciatis libero facere. Suscipit odit quas nemo, enim laudantium, provident repellendus natus nostrum facilis expedita adipisci qui, harum minus quidem officia cupiditate repellat ut praesentium. Possimus corporis, error atque ex adipisci, illum suscipit pariatur saepe impedit aliquam amet eos reiciendis quidem hic, nisi. Sint nobis modi, nesciunt quasi placeat quia. Veniam inventore corrupti quisquam illum debitis vitae accusamus nobis alias cum iste error magnam, cupiditate earum! Incidunt at consequuntur, rem ipsa odio ipsum deleniti repudiandae blanditiis harum ut in, fugit officia rerum ad, corporis dolore! Commodi repellendus esse quibusdam enim qui totam ipsum, consequuntur officia vel dolores, quod corrupti eveniet maiores minus explicabo, sapiente ratione doloribus laboriosam impedit nesciunt a obcaecati quam veritatis! Placeat, velit possimus delectus, atque voluptate iste alias illo, dolor odit ipsa facere quibusdam? Non omnis aliquid eveniet fuga labore dolores, autem blanditiis, dolorem error ex enim fugiat quisquam aut reprehenderit delectus, nihil accusamus eaque at odit natus accusantium sunt asperiores unde? Tempora dolorem, ad quidem quis adipisci dolores temporeNon omnis aliquid eveniet fuga labore dolores, autem blanditiis, dolorem error ex enim fugiat quisquam aut reprehenderit delectus, nihil accusamus eaque at odit natus accusantium sunt asperiores unde? Tempora dolorem, ad quidem quis adipisci dolores temporeNon omnis aliquid eveniet fuga labore dolores, autem blanditiis, dolorem error ex enim fugiat quisquam aut reprehenderit delectus, nihil accusamus eaque at odit natus accusantium sunt asperiores unde? Tempora dolorem, ad quidem quis adipisci dolores temporeNon omnis aliquid eveniet fuga labore dolores, autem blanditiis, dolorem error ex enim fugiat quisquam aut reprehenderit delectus, nihil accusamus eaque at odit natus accusantium sunt asperiores unde? Tempora dolorem, ad quidem quis adipisci dolores temporeNon omnis aliquid eveniet fuga labore dolores, autem blanditiis, dolorem error ex enim fugiat quisquam aut reprehenderit delectus, nihil accusamus eaque at odit natus accusantium sunt asperiores unde? Tempora dolorem, ad quidem quis adipisci dolores temporeNon omnis aliquid eveniet fuga labore dolores, autem blanditiis, dolorem error ex enim fugiat quisquam aut reprehenderit delectus, nihil accusamus eaque at odit natus accusantium sunt asperiores unde? Tempora dolorem, ad quidem quis adipisci dolores tempore</p>

关于html - CSS剪辑路径未调整大小元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45123460/

10-10 23:13
Powered by LMLPHP ©2024 CSS剪辑路径未调整大小元素 0.029406