css如何把图片设置成梯形,如何用css创建流体梯形图像?
更新答案(纯CSS3)
极端的需求有时需要极端的解决方案我已经建立在我的原始答案(下面),使一个纯粹的CSS解决方案(并可以做得更好,如果你想投入时间). current example在渲染中有点“笨拙”,对你来说可能还是可以的,但如果没有,你需要延长the already obscene number of @media queries的速度(这可能会比LESS或SASS更容易实现;我把它放在一起公式驱动excel电子表格,以帮助快速生成数字).它使用这个代码:
HTML
CSS
.Box{
height:300px;
min-width: 100px; /*could be different,but you ought to have some min*/
overflow:hidden;
}
.Box img {
height: 100%;
width: 100%;
-ms-transform-origin: 100% 100%; /* IE 9 */
-webkit-transform-origin: 100% 100%; /* Safari and Chrome */
-moz-transform-origin: 100% 100%; /* Firefox */
-o-transform-origin: 100% 100%; /* Opera */
transform-origin: 100% 100%;
}
/*Sample... you need alot of these--my fiddle example has 51*/
@media screen and (min-width: 100px) {
.Box {
-ms-transform:skewY(45deg);
-moz-transform:skewY(45deg);
-webkit-transform:skewY(45deg);
-o-transform:skewY(45deg);
transform:skewY(45deg);
}
.Box img {
-ms-transform:skewY(-90deg);
-moz-transform:skewY(-90deg);
-webkit-transform:skewY(-90deg);
-o-transform:skewY(-90deg);
transform:skewY(-90deg);
}
}
以下是计算度数的方法
假设高度:300px,窄边大约100px高,梯形上的角度相等.这意味着上下偏移量为(300px – 100px)/ 2 = 100px.然后根据以下公式将.Box角度设置为@media查询最小宽度量:
Angle = arctan(100/min-width) /*100 is the upper/lower offset as above*/
对于.Box img角度取角度乘以-2.所以这将产生您的.Box和.Box img媒体查询和转换为这个伪代码:
@media screen and (min-width: [your target min-width]) {
.Box {transform: skewY(Angle)}
.Box img {transform: skewY(-2*Angle)}
}
它的功能如何顺利完全取决于微尺度如何使您的最小宽度更改以获得新的角度设置.正如我在上面的CSS代码的评论中所说,我的例子使用51个媒体查询调用,并且仍然有一些困难.
使用某些JavaScript解决方案可能会更好吗?可能,但这完全取决于设计师,所以我在这里提供纯粹的概念证明,可以使用纯css.
原始答案
This seems to be achieving a fluid width.我不知道你想要显示多少或部分图像有多少控制,所以它可能不完全符合你的需要,但它确实使用变换形成灵活的宽度图像来给它一个假的透视看.
css如何把图片设置成梯形,如何用css创建流体梯形图像?相关推荐
- css如何把图片设置为黑白_使用CSS将图像转换为黑白图像
css如何把图片设置为黑白 Desaturating a color image couldn't be simpler with CSS. The filter is typically appli ...
- html如何将图片弄成背景,如何用css把图片弄成背景
用css把图片弄成背景的方法:首先创建一个HTML示例文件:然后在body中添加一些p标签:最后使用css中的background属性将图片设置为背景即可. 本教程操作环境:Windows7系统.cs ...
- css怎样将图片设置成正方形,而且随着浏览器窗口大小的改变而自适应缩放
效果图如下: 代码实例如下: <!doctype html> <html lang="en"><head><meta charset=&q ...
- [css] 给一个图片设置透明有哪些方式呢?
[css] 给一个图片设置透明有哪些方式呢? 1.opacity : 0 -> 子元素会继承 2.外层用盒子包裹,设置其rgba(255,255,255,0) 个人简介 我是歌谣,欢迎和大家一起 ...
- 004-如何用PS把彩色图片设置成黑白图片?
方法/步骤 1.第1步:首先,打开一张彩色的图片. 2.第2步:然后,鼠标左键点击菜单栏中的[图像]按钮. 3.第三步:最后,在[图像]按钮的下拉菜单中依次点选[调整]-[去色],就可以把彩色图片设置 ...
- 怎么把http图片改成背景图HTML,web前端:将图片设置成页面的背景-网页页面设置...
如题,字面上的意思,今天小编,就是来跟大家说一下,一个网页做一个图片背景! 将图片设置成背景,那么先找背景素材,这个背景素材可以到各大图片网站找! 那么为什么今天小编要讲这个呢? 在做一个网页中,如果 ...
- 【HTML5】网页实用技巧3:将方形图片设置成圆形后,添加圆形虚线边框
需要实现的效果:将原本是方形的图片,变成圆形,且添加一个圆形边框 实现思路: ①制作一个正方形div盒子,将图片放在div盒子里 ②将div盒子,设置边框样式 ③将盒子设置成圆形(利用 border- ...
- html怎么吧图片设置成背景音乐,如何把照片做成视频并添加音乐
如何把照片制作成视频?相信大家都已经有所耳闻了,把平时手机或者相机上拍摄的照片,还有拍摄的视频都可以合起来,再添加背景音乐就成了一个非常有纪念价值的视频了.然而已经不是只有照片和音乐的视频了,整个视频 ...
- speedoffice(PPT)怎么将插入的图片设置成背景?
插入到PPT的图片,怎么设置成背景呢? 方法一:用speedoffice打开PPT图像后,在图片上任意位置右键,出现的选项卡里面选择"添加到布局"即可实现将图片设置为背景 方法二: ...
- CSS 网页背景图片设置
<!DOCTYPE html> <html> <head><meta charset="utf-8"><style>#l ...
最新文章
- shell 中柏开机显示efi_中柏 ezpad 平板安装Fedora 21 (Linux)
- jQuery之end()和pushStack()
- (C语言)链表的实现集合的相关操作
- 用C51编写单片机延时函数
- torch.Tensor.scatter_(dim, index, src, reduce=None)
- 资深架构师手写教你使用Docker安装RabbitMQ(SpringCloud)
- html显示隐藏动画,js实现jquery动画的hide()和show()方法
- 深度学习入门之二阶段小demo练习(持续更新系列)
- 任务1:WS2812B彩灯控制和按键控制(arduino程序)
- GB/T 7714, MLA ,APA这几种参考文献格式
- vscode 脑图插件mindmap
- 创宇蜜罐入驻华为严选商城,与华为云共同构建积极纵深防御体系
- channel的解析和配置方法
- java ebcdic_java EBCDIC | 学步园
- 电话薄程序java程序实现
- 视频网站主机服务器,视频网站主机服务器
- GPS定位系统普遍存在的问题
- 第10章 车间工位吊 多工况移动载荷分析(多工况的添加、结果分析) 多工况计算
- 夕颜的python笔记003
- 泰国海外漫游卡业务介绍
热门文章
- 多个物体模型快速制作爆炸图?试一试ThingJS
- 使用winserver2003配置DNS服务器
- python样本期望值_总体是指数分布,样本均值倒数的期望和方差如何求?
- PowerBI-关系函数-RELATED RELATEDTABLE
- ping结果中TTL是什么意思
- 为什么电脑总是弹出“拨号连接”界面?
- .net core使用ef 6
- ASP.NET删除服务器端文件,asp.net删除服务器上的文件
- 微信个人赞赏码怎么用?微信赞赏码使用教程详解
- 电信 网通 铁通 DNS服务器IP地址