#html #css #web
Вопрос:
Итак, я создаю веб-сайт, и я просто хотел знать, как мне избавиться от этого открытого изображения на новой вкладке. это должно выглядеть так: изображение я немного покопался, и на моем сайте Lunift в нижнем колонтитуле есть несколько изображений. Если вы щелкнете по ним правой кнопкой мыши, «открыть изображение в новой вкладке» там не появится. Вот код, который я использовал:
<svg height="25" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>ProtonMail</title><path d="M12 20.351s-1.096-.108-1.955-.705c-.86-.596-6.58-4.688-6.58-4.688v8.098S3.513 24 4.55 24h14.9c1.036 0 1.085-.942 1.085-.942v-8.1s-5.723 4.092-6.58 4.69c-.86.595-1.955.704-1.955.704zm0-20.35S4.925-.23 3.465 7.623v5.35s.06.572 1.67 1.735c1.607 1.162 5.773 4.436 6.867 4.436 1.088 0 5.254-3.273 6.865-4.437 1.607-1.164 1.668-1.737 1.668-1.737V7.62C19.075-.229 12 .003 12 .003zm4.846 10.536h-9.69V7.623C8.14 3.723 12 3.67 12 3.67s3.863.054 4.846 3.954z"/></svg>
Я имею в виду, я скопировал это, так что это не значит, что я знаю. но, пожалуйста, помогите
Правка 1:
Я имею в виду, как мне сделать так, чтобы, когда кто-то щелкает правой кнопкой мыши по изображению на моем сайте, на нем не было надписи «Открыть изображение в новой вкладке».
Комментарии:
1. Я не понимаю, что вы пытаетесь сделать — это то, что вы хотите переопределить действие браузера по умолчанию при щелчке правой кнопкой мыши в некоторых местах (действие по умолчанию меняется в зависимости от того, на что нажимается, конечно).
Ответ №1:
Экспортируйте свой SVG-код во внешний файл.
Например: foo.svg
Затем, где бы вы ни хотели отобразить изображение, например, в элементе div, сделайте это;
<div style="background-image: url('/foo.svg');
width: 100%;
height: 60px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;"></div>
Не забудьте изменить foo.svg и высоту:60 пикселей, чтобы вам подходило.
Открытое изображение на новой вкладке больше не будет доступно в соответствующем элементе div.
Использование тега стиля в div необязательно.
и добавьте стиль в css
.фу { …бар }
вы можете использовать как.
Комментарии:
1. Но разве это не фоновое изображение, а не просто обычное изображение?
2. Да, вы не можете скрыть открытое изображение на новой вкладке, если не отключите действие щелчка правой кнопкой мыши для обычных изображений. Но вы можете поместить другой объект перед изображением. <svg код..><svg код..><div стиль=»положение: относительное; ширина: 32 пикселей; высота: 32 пикселей; верх: -40 пикселей;»><div стиль=»положение: относительное; ширина: 32 пикселей; высота: 32 пикселей; верх: — 40 пикселей;»></div> как. Однако для этого потребуется больше усилий.
Ответ №2:
Сохраните свой svg-файл и используйте его в теге следующим образом
<img class='randomClass' src='./image.svg' alt='image' />
Попробуйте оформить изображение следующим образом
.randomClass{
pointer-events: none;
}
Ответ №3:
если у вас есть css-файл, просто сделайте
svg {
pointer-events: none;
}
если у вас нет файла css, я рекомендую использовать его, но вы также можете просто использовать встроенные стили
<svg style={pointer-events: none;} height="25" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>ProtonMail</title><path d="M12 20.351s-1.096-.108-1.955-.705c-.86-.596-6.58-4.688-6.58-4.688v8.098S3.513 24 4.55 24h14.9c1.036 0 1.085-.942 1.085-.942v-8.1s-5.723 4.092-6.58 4.69c-.86.595-1.955.704-1.955.704zm0-20.35S4.925-.23 3.465 7.623v5.35s.06.572 1.67 1.735c1.607 1.162 5.773 4.436 6.867 4.436 1.088 0 5.254-3.273 6.865-4.437 1.607-1.164 1.668-1.737 1.668-1.737V7.62C19.075-.229 12 .003 12 .003zm4.846 10.536h-9.69V7.623C8.14 3.723 12 3.67 12 3.67s3.863.054 4.846 3.954z"/></svg>