本文介绍了如何扭曲图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我正在开发一个我们需要扭曲图片的项目 基本上，我想采取这个图片： > 请注意：文字也扭曲。 我真的没有线索如何去，所以任何帮助将非常感谢！ 这里是演示我想要什么 IMAGELINK 请上传链接上的图片并查看输出。解决方案这不容易的文本，我会用这个来节省时间 css warp 或使用html5查看纯CSS可乐 您可以找到相同的 请注意，您必须向左或向右滚动才能看到它。 #coke { width：510px; height：400px; overflow：auto; } img { border：0; margin-left：-172px; } a { display：block; padding-top：19px; width：194px; } a：hover img { background-image：url（'coke-title.png'）; background-repeat：no-repeat; background-position：15px 100px; } div div { background-image：url（'coke-scroll.png'）; background-repeat：no-repeat; background-position：0 0; padding-left：300px; width：660px; } p { margin：0; padding：0; float：left; height：336px; background-image：url（'http://s21.postimg.org/fd9h4yy7r/coke_label.jpg'）; background-attachment：fixed; background-repeat：repeat-x; width：1px; } ＃x1 {background-position：5px 30px;} ＃x2 {background-position：0px 30px;} ＃x3 {background-position： -3px 30px;} ＃x4 {background-position：-6px 30px;} ＃x5 {background-position：-8px 30px;} ＃x6 {background-position：-10px 30px;} ＃x7 {background-position：-12px 30px;} ＃x8 {background-position：-14px 30px;} ＃x9 {background-position：-15px 30px; } ＃x10 {background-position：-16px 30px;} ＃x11 {background-position：-17px 30px;} ＃x12 {background-position：-18px 30px;} ＃x13 {background-position：-19px 30px;} ＃x14 {background-position：-20px 30px;} ＃x15 {background-position：-21px 30px;} ＃x16 {background-position：-22px 30px; width：2px;} ＃x17 {background-position：-23px 30px;} ＃x18 {background-position：-24px 30px; width：2px;} ＃x19 {background-position：-25px 30px; width：2px;} ＃x20 {background-position：-26px 30px; width：2px;} ＃x21 {background-position：-27px 30px; width：2px;} ＃x22 {background-position：-28px 30px; width：3px;} ＃x23 {background-position：-29px 30px; width：3px;} ＃x24 {background-position：-30px 30px; width：4px;} ＃x25 {background-position：-31px 30px; width：5px;} ＃x26 {background-position：-32px 30px; width：7px;} ＃x27 {background-position：-33px 30px; width：12px;} ＃x28 {background-position：-34px 30px; width：55px;} ＃x29 {background-position：-35px 30px; width：11px;} ＃x30 {background-position：-36px 30px; width：6px;} ＃x31 {background-position：-37px 30px; width：5px;} ＃x32 {background-position：-38px 30px; width：4px;} ＃x33 {background-position：-39px 30px; width：3px;} ＃x34 {background-position：-40px 30px; width：2px;} ＃x35 {background-position：-41px 30px; width：3px;} ＃x36 {background-position：-42px 30px; width：2px;} ＃x37 {background-position：-43px 30px; width：2px;} ＃x38 {background-position：-44px 30px;} ＃x39 {background-position：-45px 30px; width：2px;} ＃x40 {background-position：-46px 30px;} ＃x41 {background-position：-47px 30px;} ＃x42 {background-position：-48px 30px;} ＃x43 {background-position：-49px 30px;} ＃x44 {background-position：-50px 30px;} ＃x45 {background-position：-51px 30px; } ＃x46 {background-position：-52px 30px;} ＃x47 {background-position：-53px 30px;} ＃x48 {background-position：-54px 30px;} ＃x49 {background-position：-56px 30px;} ＃x50 {background-position：-58px 30px;} ＃x51 {background-position：-60px 30px;} ＃x52 {background-position：-62px 30px;} ＃x53 {background-position：-65px 30px;} ＃x54 {background-position：非常感谢 Bill Criswell strong>为他的评论我会喝这： DEMO I am working a project where we need to warp imageBasically, I want to take this image:And turn it into this:Please note : text also warped.I honestly have no clue how to go about it so any help would be greatly appreciated!Here is demo what exactly i want IMAGELINKplease upload above image on link and see the output. 解决方案 well that s not easy for the text i will use this to save time css warpor use html5 have a look at Pure CSS Coke Canyou can find the same here note that you have to scroll left or right to see it in action #coke { width: 510px; height: 400px; overflow: auto; } img { border: 0; margin-left: -172px; } a { display: block; padding-top: 19px; width: 194px; } a:hover img { background-image: url('coke-title.png'); background-repeat: no-repeat; background-position: 15px 100px; } div div { background-image: url('coke-scroll.png'); background-repeat: no-repeat; background-position: 0 0; padding-left: 300px; width: 660px; } p { margin: 0; padding: 0; float: left; height: 336px; background-image: url('http://s21.postimg.org/fd9h4yy7r/coke_label.jpg'); background-attachment: fixed; background-repeat: repeat-x; width: 1px; } #x1 {background-position: 5px 30px;} #x2 {background-position: 0px 30px;} #x3 {background-position: -3px 30px;} #x4 {background-position: -6px 30px;} #x5 {background-position: -8px 30px;} #x6 {background-position: -10px 30px;} #x7 {background-position: -12px 30px;} #x8 {background-position: -14px 30px;} #x9 {background-position: -15px 30px;} #x10 {background-position: -16px 30px;} #x11 {background-position: -17px 30px;} #x12 {background-position: -18px 30px;} #x13 {background-position: -19px 30px;} #x14 {background-position: -20px 30px;} #x15 {background-position: -21px 30px;} #x16 {background-position: -22px 30px; width: 2px;} #x17 {background-position: -23px 30px;} #x18 {background-position: -24px 30px; width: 2px;} #x19 {background-position: -25px 30px; width: 2px;} #x20 {background-position: -26px 30px; width: 2px;} #x21 {background-position: -27px 30px; width: 2px;} #x22 {background-position: -28px 30px; width: 3px;} #x23 {background-position: -29px 30px; width: 3px;} #x24 {background-position: -30px 30px; width: 4px;} #x25 {background-position: -31px 30px; width: 5px;} #x26 {background-position: -32px 30px; width: 7px;} #x27 {background-position: -33px 30px; width: 12px;} #x28 {background-position: -34px 30px; width: 55px;} #x29 {background-position: -35px 30px; width: 11px;} #x30 {background-position: -36px 30px; width: 6px;} #x31 {background-position: -37px 30px; width: 5px;} #x32 {background-position: -38px 30px; width: 4px;} #x33 {background-position: -39px 30px; width: 3px;} #x34 {background-position: -40px 30px; width: 2px;} #x35 {background-position: -41px 30px; width: 3px;} #x36 {background-position: -42px 30px; width: 2px;} #x37 {background-position: -43px 30px; width: 2px;} #x38 {background-position: -44px 30px;} #x39 {background-position: -45px 30px; width: 2px;} #x40 {background-position: -46px 30px;} #x41 {background-position: -47px 30px;} #x42 {background-position: -48px 30px;} #x43 {background-position: -49px 30px;} #x44 {background-position: -50px 30px;} #x45 {background-position: -51px 30px;} #x46 {background-position: -52px 30px;} #x47 {background-position: -53px 30px;} #x48 {background-position: -54px 30px;} #x49 {background-position: -56px 30px;} #x50 {background-position: -58px 30px;} #x51 {background-position: -60px 30px;} #x52 {background-position: -62px 30px;} #x53 {background-position: -65px 30px;} #x54 {background-position: -68px 30px;} #x55 {background-position: -74px 30px;}many thanks to Bill Criswell for his comment I'd drink this: DEMO 这篇关于如何扭曲图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！
