本例演示如何向 HTML 頁面添加背景圖片。
<html>
<body background="background.jpg">
<h3>圖像背景</h3>
<p>gif 和 jpg 文件均可用作 HTML 背景。</p>
<p>如果圖像小于頁面,圖像會進行重復。</p>
</body>
</html>
HTML基礎操作:圖片顯示
TML編輯器 復制WORD里面帶圖文的文章,圖片可以直接顯示,JSP – 支持WORD上傳的富文本編輯器,EWEBEDITOR 從WORD中復制內容帶多張圖片,如何從WORD文檔復制公式到富文本編輯器,復制word圖片,從word中復制圖片,
從word中粘貼圖片,粘貼word內容,粘貼word圖片,粘貼word圖文,復制粘貼word文檔,復制粘貼word圖片,復制粘貼word圖文,復制粘貼word內容,
之前在網上找過相關的資料,論壇里面也有網友交流過,還加過不少QQ群和微信群,但是結果都不太令人滿意。相關的文章提問的人多,能夠給出方案的人少,能夠給出成熟產品的就更少了,說的直接一點根本就沒有,純屬浪費時間。要示例沒示例,要代碼沒代碼,根本就用不了,
有幾個方面的原因吧,一個是網上的資料提的一些都是開源的方案,也不是說開源的方案不行,關鍵是提到的這些方案,公司項目組去評估發現聯系不到開發人員,而且方案本身也停止更新了,處于沒有人維護的狀態,所以項目組這邊不太敢用。主要是之前在這塊也踩過坑。
客戶那邊也不差這點錢,之前公司項目組就是在這塊踩過坑,用了開源的方案,客戶那邊提了一個新需求,但是由于項目組對產品本身并不熟悉,導致沒辦法進行二次開發。
從word中復制圖片和文字內容,然后粘貼到web富文本編輯器中,粘貼后word圖片自動上傳到web服務器中,自動將圖片和文字HTML添加到編輯器中,保留word中的文字格式,文字顏色,字體,樣式,
用戶發布新聞的時候是從word里面復制圖片和文字,然后將word圖文內容粘貼到web富文本編輯器中,希望能夠將word的圖片自動上傳到服務器中,服務器地址能夠自定義,
后端的話需要支持任意開發語言,比如ASP,ASP.NET,JSP,PHP,PYTHON等。只要是基于標準HTTP協議的都要支持。如果能夠不裝控件最好,視頻教程:https://www.ixigua.com/7233953214108795407
1.下載示例:
http://www.ncmem.com/webapp/wordpaster/versions.aspx
2.復制WordPaster插件目錄
3.引入插件文件
注意:不要重復引入jquery,如果您的項目已經引入了jq,則不用再引入jq-1.4
4.在工具欄中增加插件按鈕
6.初始化控件
注意:
1.如果接口字段名稱不是file,請配置FileFieldName。ueditor接口中使用的upfile字段
參考:http://www.ncmem.com/doc/view.aspx?id=c3ad06c2ae31454cb418ceb2b8da7c45
2.如果接口返回JSON,請配置ImageMatch
參考:http://www.ncmem.com/doc/view.aspx?id=07e3f323d22d4571ad213441ab8530d1
3.如果接口返回的圖片地址沒有域名,請配置ImageUrl
參考:http://www.ncmem.com/doc/view.aspx?id=704cd302ebd346b486adf39cf4553936
4.如果接口有權限驗證(登陸驗證,SESSION驗證),請配置COOKIE?;蛉∠麢嘞掾炞C。
參考:http://www.ncmem.com/doc/view.aspx?id=8602DDBF62374D189725BF17367125F3
效果
訂閱版報價單:https://drive.weixin.qq.com/s?k=ACoAYgezAAw70JsA8m
政企版報價單:https://drive.weixin.qq.com/s?k=ACoAYgezAAwuqJtN30#/
年費版報價單:https://drive.weixin.qq.com/s?k=ACoAYgezAAwFouDIB4#/
OEM版報價單:https://drive.weixin.qq.com/s?k=ACoAYgezAAwV00mQSY
產品源代碼:https://drive.weixin.qq.com/s?k=ACoAYgezAAwz13B5Tr
授權碼生成器:https://drive.weixin.qq.com/s?k=ACoAYgezAAwzYuEEY1
概述
1.1 前言
使用一個或多個圖像相關的CSS屬性(background-blend-mode, mix-blend-mode, or filter)可以實現許多特殊的圖片顯示效果,共列舉了20種圖片顯示效果。
2 效果列表
2.1 鉛筆畫效果
效果示例
SCSS代碼
.pencil-effect { $url : url(photo.jpg); background-image: $url; background-size: cover; background-position: center; @supports (filter: invert(1)) and (background-blend-mode: difference) { background-image: $url, $url; background-blend-mode: difference; background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px); filter: brightness(2) invert(1) grayscale(1); box-shadow: inset 0 0 0 1px black; } }
我自己是一名從事了多年開發的web前端老程序員,目前辭職在做自己的web前端私人定制課程,今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨,各種框架都有整理,送給每一位前端小伙伴,想要獲取的可以關注我的頭條號并在后臺私信我:前端,即可免費獲取。
2.2 水彩效果
效果示例
SCSS代碼
.watercolor-effect { $url : url(photo.jpg); background-image: $url; background-size: cover; background-position: center; @supports (filter: blur(2px)) and (mix-blend-mode: multiply) { position: relative; overflow: hidden; &:before, &:after { display: block; content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; } &:before { background-image: $url, $url; background-blend-mode: difference; background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px); filter: brightness(2) invert(1) grayscale(1); box-shadow: inset 0 0 0 1px black; } &:after { background-image: $url; background-position: center; mix-blend-mode: multiply; filter: brightness(1.3) blur(2px) contrast(2); } } }
2.3 浮雕效果
效果示例
SCSS代碼
.emboss-effect { $url : url(photo.jpg); background-image: $url; background-size: cover; background-position: center; @supports (filter: invert(1)) and (background-blend-mode: difference, screen) { background-image: $url, $url, $url; background-blend-mode: difference, screen; background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px), center; filter: brightness(2) invert(1) grayscale(1); } }
2.4 彩鉛效果
效果示例
SCSS代碼
.colored-pencil-effect { $url : url(photo.jpg); background-image: $url; background-size: cover; background-position: center; @supports (filter: invert(1)) and (mix-blend-mode: color) { position: relative; &:before, &:after { display: block; content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; box-shadow: inset 0 0 0 1px black; } &:before { background-image: $url, $url; background-blend-mode: difference; background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px); filter: brightness(2) invert(1) grayscale(1); } &:after { background: inherit; mix-blend-mode: color; } } }
2.5 黑板效果
效果示例
SCSS代碼
.chalkboard-effect { $url : url(photo.jpg); background-image: $url; background-size: cover; background-position: center; @supports (filter: grayscale(1)) and (background-blend-mode: difference) { background-image: $url, $url; background-blend-mode: difference; background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px); filter: brightness(1.5) grayscale(1); } }
2.6 彩色黑板效果
效果示例
SCSS代碼
.colored-chalkboard-effect { $url : url(photo.jpg); background-image: $url; background-size: cover; background-position: center; @supports (filter: brightness(2)) and (background-blend-mode: color, difference) { background-image: $url, $url, $url; background-size: cover; background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px), center; background-blend-mode: color, difference; filter: brightness(2); } }
2.7 噴槍效果
效果示例
SCSS代碼
.airbrush-effect { $url : url(photo.jpg); background-image: $url; background-size: cover; background-position: center; @supports (filter: blur(5px) contrast(5)) and (mix-blend-mode: multiply) { position: relative; overflow: hidden; &:after { display: block; content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: inherit; filter: brightness(1.5) saturate(100) blur(5px) contrast(5); mix-blend-mode: multiply; } } }
2.8 絢爛效果
效果示例
SCSS代碼
.hallucination-effect { $url : url(photo.jpg); $offset : 5px; background-image: $url; background-size: cover; background-position: center; @supports (mix-blend-mode: multiply) { position: relative; overflow: hidden; background-color: magenta; background-blend-mode: screen; &:before, &:after { display: block; content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: inherit; mix-blend-mode: multiply; transform: scale(1.05); } &:before { background-color: yellow; background-blend-mode: screen; transform-origin: top left; } &:after { background-color: cyan; background-blend-mode: screen; transform-origin: bottom right; } } }
2.9 絨布效果
效果示例
SCSS代碼
.flannel-effect { $url : url(photo.jpg); background-image: $url; background-size: cover; background-position: center; @supports (background-blend-mode: overlay) { background-image: $url, $url, $url; background-position: center; background-size: 100%, 100000% 100%, 100% 100000%; background-blend-mode: overlay; } }
2.10 水平低墨
效果示例
SCSS代碼
.low-ink-x-effect { $url : url(photo.jpg); background-image: $url; background-size: cover; background-position: center; @supports (background-blend-mode: screen, overlay) { background-image: $url, $url, $url; background-size: 100% 100%, 10000% 100%; background-blend-mode: screen, overlay; } }
2.11 垂直低墨效果
效果示例
SCSS代碼
.low-ink-y-effect { $url : url(photo.jpg); background-image: $url; background-size: cover; background-position: center; @supports (background-blend-mode: screen, overlay) { background-image: $url, $url, $url; background-size: 100% 100%, 100% 1000%; background-blend-mode: screen, overlay; } }
2.12 拼貼效果
效果示例
SCSS代碼
.collage-effect { $url : url(photo.jpg); background-image: $url; background-size: cover; background-position: center; @supports (background-blend-mode: overlay) { background-image: $url, $url, $url, $url, $url, $url; background-size: 200%, 80%, 60%, 50%, 40%, 100%; background-position: 50%, 80%, 30%, 0; background-blend-mode: overlay; background-repeat: no-repeat; } }
2.13 馬賽克效果
效果示例
SCSS代碼
.mosaic-effect { $url : url(photo.jpg); background-image: $url, $url; background-size: cover, 5% 5%; background-position: center; background-blend-mode: overlay; }
2.14 圖片邊框效果
效果示例
SCSS代碼
.photo-border-effect { $url : url(photo.jpg); background-image: $url, $url; background-position: center; background-size: 60%, 20%; background-repeat: no-repeat, repeat; }
2.15 紅外效果
效果示例
SCSS代碼
.infrared-effect { $url : url(photo.jpg); background-image: $url; background-size: cover; background-position: center; filter: hue-rotate(180deg) saturate(2); }
2.16 夜視效果
效果示例
SCSS代碼
.night-vision-effect { $url : url(photo.jpg); $line-width: 5px; background-image: $url , radial-gradient( #0F0, #000 ), repeating-linear-gradient( transparent 0, rgba(0,0,0,0.1) $line-width/2, transparent $line-width ); background-size: cover; background-position: center; background-blend-mode: overlay; }
2.17 沃霍爾效果
效果示例
SCSS代碼
.warhol-effect { $url : url(photo.jpg); background-image: $url; background-size: cover; background-position: center; @supports (background-blend-mode: color) { background-image: linear-gradient( #14EBFF 0, #14EBFF 50%, #FFFF70 50%, #FFFF70 100% ), linear-gradient( #FF85DA 0, #FF85DA 50%, #AAA 50%, #AAA 100% ), $url; background-size: 50% 100%, 50% 100%, 50% 50%; background-position: top left, top right; background-repeat: no-repeat, no-repeat, repeat; background-blend-mode: color; } }
2.18 顏色校正效果
效果示例
SCSS代碼
.selective-color-effect { $url : url(photo.jpg); background-image: $url; background-size: cover; background-position: center; @supports (filter: brightness(3)) and (mix-blend-mode: color) { position: relative; &:before, &:after { display: block; content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: inherit; background-color: red; background-blend-mode: screen; mix-blend-mode: color; filter: brightness(3); } } }
2.19 水平鏡像效果
效果示例
SCSS代碼
.mirror-x-effect { $url : url(photo.jpg); background-image: $url; background-size: cover; background-position: center; @supports (transform: scaleX(-1)) { position: relative; &:before, &:after { display: block; content: ""; position: absolute; top: 0; bottom: 0; background: inherit; } &:before { left: 0; right: 50%; transform: scaleX(-1); } &:after { left: 50%; right: 0; } } }
2.20 垂直鏡像效果
效果示例
SCSS代碼
.mirror-y-effect { $url : url(photo.jpg); background-image: $url; background-size: cover; background-position: center; @supports (transform: scaleY(-1)) { position: relative; &:before, &:after { display: block; content: ""; position: absolute; left: 0; right: 0; background: inherit; } &:before { top: 0; bottom: 50%; transform: scaleY(-1); } &:after { top: 50%; bottom: 0; } } }
來源:https://mp.weixin.qq.com/s/JkQybBrWootOY6z5ZFM33Q
作者:每天學編程
*請認真填寫需求信息,我們會在24小時內與您取得聯系。